diff --git a/.editorconfig b/.editorconfig
index 1ed453a3..25ddfac5 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -4,7 +4,8 @@ root = true
 end_of_line = lf
 insert_final_newline = true
 
-[*.{js,json,yml}]
+[*.{js,ts,json,yml}]
 charset = utf-8
 indent_style = space
 indent_size = 2
+print_width = 80
diff --git a/.env.example b/.env.example
index 0a0dd7d0..dacee0f3 100644
--- a/.env.example
+++ b/.env.example
@@ -1,3 +1,6 @@
+ALGOLIA_APPLICATION_ID=YOUR_ALGOLIA_APPLICATION_ID
+ALGOLIA_API_KEY=YOUR_ALGOLIA_API_KEY
+
 # dev envs not needed in production
 YATA_API_TOKEN=YOUR_YATA_API_TOKEN # yata api token for fetching translations
 
@@ -12,3 +15,6 @@ NUXT_PUBLIC_TRANSAK_API_KEY=YOUR_NUXT_PUBLIC_TRANSAK_API_KEY
 
 # Ramp
 NUXT_PUBLIC_RAMP_API_KEY=YOUR_NUXT_PUBLIC_RAMP_API_KEY
+
+# API secret
+NUXT_PUBLIC_API_SHARED_SECRET=YOUR_NUXT_PUBLIC_API_SHARED_SECRET
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 430b0ea6..35f205f7 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -61,7 +61,15 @@ module.exports = {
     'tailwindcss/no-custom-classname': [
       'error',
       {
-        whitelist: ['paragraph-.*', 'heading-.*', 'nav-.*', 'shadow-.*'],
+        whitelist: [
+          'paragraph-.*',
+          'heading-.*',
+          'nav-.*',
+          'shadow-.*',
+          'instagram-.*',
+          'twitter-.*',
+          'grid-.*',
+        ],
       },
     ],
   },
@@ -70,8 +78,6 @@ module.exports = {
       files: ['**/*.spec.ts'],
       extends: ['plugin:playwright/playwright-test'],
       rules: {
-        'import/order': 'off',
-        '@typescript-eslint/no-unused-vars': 'off',
         'playwright/no-standalone-expect': 'off',
         'playwright/no-networkidle': 'off',
         'playwright/no-skipped-test': 'off',
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 11d1de71..d0910fb5 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -19,6 +19,7 @@ env:
   NUXT_PUBLIC_SENTRY_ENVIRONMENT: '${{ secrets.SENTRY_ENVIRONMENT }}'
   NUXT_PUBLIC_TRANSAK_API_KEY: '${{ secrets.TRANSAK_API_KEY }}'
   NUXT_PUBLIC_RAMP_API_KEY: '${{ secrets.RAMP_API_KEY }}'
+  NUXT_PUBLIC_API_SHARED_SECRET: '${{ secrets.API_SHARED_SECRET }}'
 
 jobs:
   test:
diff --git a/.github/workflows/review.yaml b/.github/workflows/review.yaml
index 42caab1e..4ddf606f 100644
--- a/.github/workflows/review.yaml
+++ b/.github/workflows/review.yaml
@@ -7,6 +7,6 @@ jobs:
   add-reviews:
     runs-on: ubuntu-latest
     steps:
-      - uses: kentaro-m/auto-assign-action@v1.2.4
+      - uses: kentaro-m/auto-assign-action@v2.0.0
         with:
           configuration-path: '.github/auto_assign.yaml'
diff --git a/app.vue b/app.vue
index ba7d7edc..0bf3ea41 100644
--- a/app.vue
+++ b/app.vue
@@ -21,8 +21,12 @@ const { addProviderEvents, removeProviderEvents } =
 const { disconnect } = useBaseProvider()
 const { cacheValue } = useCache()
 const { currencyList } = storeToRefs(useCurrencyStore())
-const { initProvider, reconnect } = useWalletConnectProvider()
+const {
+  initProvider: initWalletConnectProvider,
+  connect: connectWalletConnect,
+} = useWalletConnectProvider()
 const { formatMessage } = useIntl()
+const { gridChainId, tempGrids } = storeToRefs(useGridStore())
 const swHasUpgrade = ref<boolean>(false)
 
 // Make the service worker update available to the rest of the app
@@ -39,13 +43,7 @@ const setupTranslations = () => {
  * RPC - from RPC endpoint
  */
 const setupWeb3Instances = async () => {
-  // reconnect wallet connect
-  if (isWalletConnect.value) {
-    await initProvider()
-    await reconnect()
-  }
-
-  // set injected provider
+  // set web3 for injected provider
   if (INJECTED_PROVIDER) {
     // for chain interactions through dapp
     addWeb3(PROVIDERS.INJECTED, INJECTED_PROVIDER)
@@ -62,6 +60,12 @@ const setupWeb3Instances = async () => {
     // expose web3 instance to global scope for console access
     window.web3 = getWeb3(PROVIDERS.RPC)
   }
+
+  // reconnect wallet connect
+  if (isWalletConnect.value) {
+    await initWalletConnectProvider()
+    await connectWalletConnect()
+  }
 }
 
 /**
@@ -112,18 +116,19 @@ const setupNetwork = async () => {
   const network = useRouter().currentRoute.value.query?.network
 
   if (!network) {
-    await checkNetwork()
     return
   }
 
   if (SUPPORTED_NETWORK_IDS.includes(network)) {
     selectedChainId.value = getNetworkById(network).chainId
-    await checkNetwork()
+
+    // reset temp grid layout if network is changed
+    if (gridChainId.value !== selectedChainId.value) {
+      tempGrids.value = {}
+    }
   } else {
     console.warn(
-      `Invalid network: ${network}, valid networks are ${SUPPORTED_NETWORK_IDS.join(
-        ', '
-      )}`
+      `Invalid network: ${network}, valid networks are ${SUPPORTED_NETWORK_IDS.join(', ')}`
     )
   }
 }
@@ -190,16 +195,20 @@ const resetDataProvider = () => {
 }
 
 onMounted(async () => {
-  setupTranslations()
-  setupNetwork()
-  await setupWeb3Instances()
-  checkConnectionExpiry()
-  await setupConnectedProfile()
-  resetDataProvider()
-  isLoadedApp.value = true
-  await setupCurrencies()
-  window.scrollTo(0, 0)
-  checkBuyLyx()
+  try {
+    setupTranslations()
+    setupNetwork()
+    await setupWeb3Instances()
+    checkConnectionExpiry()
+    await setupConnectedProfile()
+    resetDataProvider()
+    isLoadedApp.value = true
+    await setupCurrencies()
+    window.scrollTo(0, 0)
+    checkBuyLyx()
+  } catch (error) {
+    console.error(error)
+  }
 })
 
 onUnmounted(() => {
diff --git a/biome.json b/biome.json
index 426a84f6..c91247ed 100644
--- a/biome.json
+++ b/biome.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.6.4/schema.json",
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
   "linter": {
     "enabled": true,
     "rules": {
@@ -15,14 +15,15 @@
   "formatter": {
     "enabled": false,
     "indentWidth": 2,
-    "indentStyle": "space"
+    "indentStyle": "space",
+    "lineWidth": 80
   },
   "javascript": {
     "formatter": {
       "enabled": false,
       "semicolons": "asNeeded",
       "quoteStyle": "single",
-      "trailingComma": "all"
+      "trailingCommas": "all"
     }
   },
   "files": {
diff --git a/components/AppModal.vue b/components/AppModal.vue
index 778ad815..d03a29ea 100644
--- a/components/AppModal.vue
+++ b/components/AppModal.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useElementSize, useWindowSize } from '@vueuse/core'
+
 import type { ModalSizes } from '@lukso/web-components'
 
 const { setModal } = useAppStore()
@@ -6,6 +8,9 @@ const { isModalOpen, modal } = storeToRefs(useAppStore())
 const modalTemplateComponent = shallowRef()
 const route = useRoute()
 const { closeModal } = useModal()
+const modalContainer = ref<HTMLElement | null>(null)
+const { height: modalHeight } = useElementSize(modalContainer)
+const { height: screenHeight } = useWindowSize()
 
 /**
  * Load modal template component
@@ -32,7 +37,7 @@ watch(
       setModal({
         template: modalTemplate,
         data: modalData ? JSON.parse(modalData) : undefined,
-        size: modalSize,
+        size: modalSize || 'small',
       })
     } else {
       loadModalTemplate(MODAL_DEFAULT_TEMPLATE)
@@ -45,6 +50,23 @@ watch(
   },
   { deep: true, immediate: true }
 )
+
+const handleKeyDown = (event: KeyboardEvent) => {
+  const activeElement = document.activeElement?.tagName
+  const key = event.key
+
+  if (key === 'Escape' && activeElement === 'BODY') {
+    closeModal()
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', handleKeyDown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleKeyDown)
+})
 </script>
 
 <template>
@@ -54,10 +76,18 @@ watch(
     :data-template="modal?.template"
     @on-backdrop-click="closeModal"
   >
-    <component
-      v-if="modalTemplateComponent"
-      :is="modalTemplateComponent"
-      class="animate-fade-in"
-    ></component>
+    <div
+      ref="modalContainer"
+      class="max-h-[calc(100vh-100px)]"
+      :class="{
+        'overflow-y-auto': modalHeight > screenHeight - 150,
+      }"
+    >
+      <component
+        v-if="modalTemplateComponent"
+        :is="modalTemplateComponent"
+        class="animate-fade-in"
+      ></component>
+    </div>
   </lukso-modal>
 </template>
diff --git a/components/AppNavbar.vue b/components/AppNavbar.vue
index 525997a0..9450118a 100644
--- a/components/AppNavbar.vue
+++ b/components/AppNavbar.vue
@@ -26,7 +26,6 @@ const handleNavigateSend = () => {
 const handleConnect = () => {
   showModal({
     template: 'ConnectWallet',
-    size: 'auto',
   })
 }
 
@@ -45,19 +44,28 @@ const handleMobileSearch = () => {
 const handleNavigateSettings = () => {
   navigateTo(settingsRoute())
 }
+
+const handleNavigateMyUpDashboard = () => {
+  navigateTo(myUpDappDashboardUrl(), { external: true })
+}
 </script>
 
 <template>
   <lukso-navbar
-    is-sticky
-    :title="$formatMessage('header_title')"
     :is-testnet="isTestnet ? true : undefined"
+    logo-url="/images/logo-ue.svg"
+    is-sticky
+    is-transparent
     has-menu
-    mobile-breakpoint="lg"
+    mobile-breakpoint="md"
     @on-brand-click="handleNavigateLanding"
   >
-    <div class="flex items-center justify-end" slot="desktop-menu">
+    <!-- Desktop Menu -->
+    <div class="flex items-center justify-end pr-4" slot="desktop-menu">
+      <!-- Send assets -->
       <AppNavbarSendButton v-if="isConnected" />
+
+      <!-- Profile -->
       <lukso-button
         v-if="isConnected"
         variant="text"
@@ -75,22 +83,40 @@ const handleNavigateSettings = () => {
           {{ $formatMessage('header_my_profile') }}
         </span>
       </lukso-button>
+
+      <!-- Profile dropdown -->
       <AppNavbarProfileDropdown v-if="isConnected" />
+
+      <!-- Connect -->
       <lukso-button
         v-else
-        variant="secondary"
+        variant="landing"
         custom-class="text-12 nav-apax-12-medium-uppercase"
         @click="handleConnect"
         :is-loading="isConnecting ? true : undefined"
         :loading-text="$formatMessage('header_connect')"
       >
-        <span class="text-purple-41">
-          {{ $formatMessage('header_connect') }}
-        </span>
+        {{ $formatMessage('header_connect') }}
       </lukso-button>
+
+      <!-- Settings -->
+      <div
+        v-if="!isConnected"
+        class="ml-4 h-6 w-px border-l border-purple-82 pl-4"
+      >
+        <lukso-icon
+          name="settings"
+          color="purple-41"
+          class="cursor-pointer opacity-70 transition hover:rotate-45 hover:opacity-100"
+          @click="handleNavigateSettings"
+        ></lukso-icon>
+      </div>
     </div>
+
+    <!-- Mobile Menu -->
     <div slot="mobile-menu">
       <div className="flex flex-col items-center justify-center h-screen pb-32">
+        <!-- Send assets -->
         <lukso-button
           v-if="isConnected"
           variant="text"
@@ -108,6 +134,8 @@ const handleNavigateSettings = () => {
             {{ $formatMessage('header_send') }}
           </span>
         </lukso-button>
+
+        <!-- Profile -->
         <lukso-button
           v-if="isConnected"
           variant="text"
@@ -125,6 +153,33 @@ const handleNavigateSettings = () => {
             {{ $formatMessage('header_my_profile') }}
           </span>
         </lukso-button>
+
+        <!-- Dashboard (my.up.cloud) -->
+        <lukso-button
+          v-if="isConnected"
+          variant="text"
+          custom-class="text-12 nav-apax-12-medium-uppercase"
+          class="group"
+          @click="handleNavigateMyUpDashboard"
+        >
+          <span class="text-purple-63 transition group-hover:text-purple-41">
+            {{ $formatMessage('header_relayer_dashboard') }}
+          </span>
+          <lukso-icon
+            name="link-3"
+            size="small"
+            class="ml-2 group-hover:hidden"
+            color="purple-63"
+          ></lukso-icon>
+          <lukso-icon
+            name="link-3"
+            size="small"
+            class="ml-2 hidden group-hover:inline-block"
+            color="purple-41"
+          ></lukso-icon>
+        </lukso-button>
+
+        <!-- Settings -->
         <lukso-button
           v-if="isConnected"
           variant="text"
@@ -136,6 +191,8 @@ const handleNavigateSettings = () => {
             {{ $formatMessage('header_settings') }}
           </span>
         </lukso-button>
+
+        <!-- Disconnect -->
         <lukso-button
           v-if="isConnected"
           variant="text"
@@ -147,6 +204,8 @@ const handleNavigateSettings = () => {
             {{ $formatMessage('header_disconnect') }}
           </span>
         </lukso-button>
+
+        <!-- Connect -->
         <lukso-button
           v-else
           variant="text"
@@ -160,12 +219,32 @@ const handleNavigateSettings = () => {
         </lukso-button>
       </div>
     </div>
-    <div slot="mobile-icons" class="flex">
+
+    <!-- Mobile Icons -->
+    <div slot="mobile-icons" class="flex items-center">
       <lukso-icon
         name="search"
         class="cursor-pointer"
         @click="handleMobileSearch"
       ></lukso-icon>
+      <lukso-button
+        v-if="!isConnected"
+        variant="landing"
+        size="small"
+        custom-class="text-12 nav-apax-12-medium-uppercase"
+        @click="handleConnect"
+        :is-loading="isConnecting ? true : undefined"
+        :loading-text="$formatMessage('header_connect')"
+        class="ml-4 mr-1"
+      >
+        {{ $formatMessage('header_connect') }}
+      </lukso-button>
+      <AppNavbarAvatar
+        v-if="isConnected"
+        size="x-small"
+        class="ml-4 mr-1 cursor-pointer"
+        @click="handleNavigateProfile"
+      />
     </div>
     <div slot="desktop-center" class="w-full">
       <AppNavbarProfileSearch />
diff --git a/components/AppNavbarAvatar.vue b/components/AppNavbarAvatar.vue
new file mode 100644
index 00000000..50342511
--- /dev/null
+++ b/components/AppNavbarAvatar.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { ProfileSize } from '@lukso/web-components'
+
+type Props = {
+  size?: ProfileSize
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 'small',
+})
+const connectedProfile = useProfile().connectedProfile()
+const avatarImage = useProfileAvatar(connectedProfile, 40)
+</script>
+
+<template>
+  <lukso-profile
+    :size="size"
+    :profile-url="avatarImage?.url"
+    :profile-address="connectedProfile?.address"
+    :data-profile-address="connectedProfile?.address"
+    has-identicon
+  ></lukso-profile>
+</template>
diff --git a/components/AppNavbarLanding.vue b/components/AppNavbarLanding.vue
index e39e9681..4df51161 100644
--- a/components/AppNavbarLanding.vue
+++ b/components/AppNavbarLanding.vue
@@ -1,28 +1,45 @@
 <script setup lang="ts">
-const { isTestnet, isConnected } = storeToRefs(useAppStore())
+const { isTestnet, isConnected, connectedProfileAddress, isConnecting } =
+  storeToRefs(useAppStore())
 const { disconnect } = useBaseProvider()
 const { showModal } = useModal()
 
 const handleConnect = async () => {
   showModal({
     template: 'ConnectWallet',
-    size: 'auto',
   })
 }
 
 const handleDisconnect = async () => {
   disconnect()
 }
+
+const handleNavigateSettings = () => {
+  navigateTo(settingsRoute())
+}
+
+const handleNavigateProfile = async () => {
+  navigateTo(profileRoute(connectedProfileAddress.value))
+}
+
+const handleNavigateMyUpDashboard = () => {
+  navigateTo(myUpDappDashboardUrl(), { external: true })
+}
 </script>
 
 <template>
   <lukso-navbar
-    :title="$formatMessage('header_title')"
     :is-testnet="isTestnet ? true : undefined"
+    logo-url="/images/logo-ue.svg"
     is-transparent
     has-menu
   >
-    <div class="flex w-full items-center justify-end gap-4" slot="desktop-menu">
+    <!-- Desktop Menu -->
+    <div
+      class="flex w-full items-center justify-end gap-4 pr-4"
+      slot="desktop-menu"
+    >
+      <!-- L14 Profiles -->
       <lukso-button
         variant="text"
         is-link
@@ -41,6 +58,8 @@ const handleDisconnect = async () => {
           color="purple-51"
         ></lukso-icon>
       </lukso-button>
+
+      <!-- Support -->
       <lukso-button
         variant="text"
         is-link
@@ -53,6 +72,8 @@ const handleDisconnect = async () => {
           {{ $formatMessage('footer_need_help_text') }}
         </span>
       </lukso-button>
+
+      <!-- Create Profile -->
       <lukso-button
         variant="secondary"
         is-link
@@ -70,7 +91,11 @@ const handleDisconnect = async () => {
           }}
         </span>
       </lukso-button>
+
+      <!-- Profile dropdown -->
       <AppNavbarProfileDropdown v-if="isConnected" />
+
+      <!-- Connect -->
       <lukso-button
         v-else
         variant="landing"
@@ -80,9 +105,22 @@ const handleDisconnect = async () => {
       >
         {{ $formatMessage('header_connect') }}
       </lukso-button>
+
+      <!-- Settings -->
+      <div v-if="!isConnected" class="h-6 w-px border-l border-purple-82 pl-4">
+        <lukso-icon
+          name="settings"
+          color="purple-41"
+          class="cursor-pointer opacity-70 transition hover:rotate-45 hover:opacity-100"
+          @click="handleNavigateSettings"
+        ></lukso-icon>
+      </div>
     </div>
+
+    <!-- Mobile Menu -->
     <div slot="mobile-menu">
       <div className="flex flex-col items-center justify-center h-screen pb-32">
+        <!-- L14 Profiles -->
         <lukso-button
           variant="text"
           custom-class="no-underline"
@@ -109,6 +147,8 @@ const handleDisconnect = async () => {
             color="purple-41"
           ></lukso-icon>
         </lukso-button>
+
+        <!-- Support -->
         <lukso-button
           variant="text"
           is-link
@@ -123,6 +163,8 @@ const handleDisconnect = async () => {
             {{ $formatMessage('footer_need_help_text') }}
           </span>
         </lukso-button>
+
+        <!-- Create Profile -->
         <lukso-button
           variant="text"
           custom-class="no-underline"
@@ -153,6 +195,58 @@ const handleDisconnect = async () => {
             color="purple-41"
           ></lukso-icon>
         </lukso-button>
+
+        <!-- Profile -->
+        <lukso-button
+          v-if="isConnected"
+          variant="text"
+          custom-class="text-12 nav-apax-12-medium-uppercase"
+          class="group"
+          @click="handleNavigateProfile"
+        >
+          <span class="text-purple-63 transition group-hover:text-purple-41">
+            {{ $formatMessage('header_my_profile') }}
+          </span>
+        </lukso-button>
+
+        <!-- Dashboard (my.up.cloud) -->
+        <lukso-button
+          v-if="isConnected"
+          variant="text"
+          custom-class="text-12 nav-apax-12-medium-uppercase"
+          class="group"
+          @click="handleNavigateMyUpDashboard"
+        >
+          <span class="text-purple-63 transition group-hover:text-purple-41">
+            {{ $formatMessage('header_relayer_dashboard') }}
+          </span>
+          <lukso-icon
+            name="link-3"
+            size="small"
+            class="ml-2 group-hover:hidden"
+            color="purple-63"
+          ></lukso-icon>
+          <lukso-icon
+            name="link-3"
+            size="small"
+            class="ml-2 hidden group-hover:inline-block"
+            color="purple-41"
+          ></lukso-icon>
+        </lukso-button>
+
+        <!-- Settings -->
+        <lukso-button
+          variant="text"
+          custom-class="text-12 nav-apax-12-medium-uppercase"
+          class="group"
+          @click="handleNavigateSettings"
+        >
+          <span class="text-purple-63 transition group-hover:text-purple-41">
+            {{ $formatMessage('header_settings') }}
+          </span>
+        </lukso-button>
+
+        <!-- Disconnect -->
         <lukso-button
           v-if="isConnected"
           variant="text"
@@ -164,6 +258,8 @@ const handleDisconnect = async () => {
             {{ $formatMessage('header_disconnect') }}
           </span>
         </lukso-button>
+
+        <!-- Connect -->
         <lukso-button
           v-else
           variant="text"
@@ -177,5 +273,27 @@ const handleDisconnect = async () => {
         </lukso-button>
       </div>
     </div>
+
+    <!-- Mobile Icons -->
+    <div slot="mobile-icons" class="flex items-center">
+      <lukso-button
+        v-if="!isConnected"
+        variant="landing"
+        size="small"
+        custom-class="text-12 nav-apax-12-medium-uppercase"
+        @click="handleConnect"
+        :is-loading="isConnecting ? true : undefined"
+        :loading-text="$formatMessage('header_connect')"
+        class="ml-4 mr-1"
+      >
+        {{ $formatMessage('header_connect') }}
+      </lukso-button>
+      <AppNavbarAvatar
+        v-if="isConnected"
+        size="x-small"
+        class="ml-4 mr-1 cursor-pointer"
+        @click="handleNavigateProfile"
+      />
+    </div>
   </lukso-navbar>
 </template>
diff --git a/components/AppNavbarMobileSearch.vue b/components/AppNavbarMobileSearch.vue
index 8574d38c..e9ed2ab2 100644
--- a/components/AppNavbarMobileSearch.vue
+++ b/components/AppNavbarMobileSearch.vue
@@ -9,7 +9,7 @@ const handleClose = () => {
 <template>
   <div
     @click="handleClose"
-    class="fixed left-0 top-0 z-[1000] h-[100vh] w-[100vw] animate-fade-in bg-[rgba(196,202,206,0.6)] backdrop-blur-sm animation-duration-200"
+    class="fixed left-0 top-0 z-[1000] h-screen w-screen animate-fade-in bg-[rgba(196,202,206,0.6)] backdrop-blur-sm animation-duration-200"
   ></div>
   <div
     id="mobile-search"
diff --git a/components/AppNavbarProfileDropdown.vue b/components/AppNavbarProfileDropdown.vue
index 6473b6e1..661a0339 100644
--- a/components/AppNavbarProfileDropdown.vue
+++ b/components/AppNavbarProfileDropdown.vue
@@ -9,8 +9,6 @@ const handleToggleDropdown = () => {
   isDropdownOpen.value = !isDropdownOpen.value
 }
 
-const avatarImage = useProfileAvatar(connectedProfile, 40)
-
 const handleDisconnect = async () => {
   disconnect()
 }
@@ -26,7 +24,7 @@ const handleOutsideDropdown = (event: Event) => {
 }
 
 const handleNavigateMyUpDashboard = () => {
-  window.open(myUpDappDashboardUrl(), '_self')
+  navigateTo(myUpDappDashboardUrl(), { external: true })
 }
 
 const handleNavigateSettings = () => {
@@ -48,18 +46,12 @@ onUnmounted(() => {
 
 <template>
   <div class="relative cursor-pointer pl-4">
-    <lukso-profile
-      size="small"
-      :profile-url="avatarImage?.url"
-      @click="handleToggleDropdown"
-      :profile-address="connectedProfile?.address"
-      :data-profile-address="connectedProfile?.address"
-      has-identicon
-    ></lukso-profile>
+    <AppNavbarAvatar @click="handleToggleDropdown" />
     <div
-      class="absolute right-0 z-[1000] mt-8 animate-fade-in select-none rounded-12 bg-neutral-100 shadow-pink-drop-shadow animation-duration-150 before:absolute before:right-0 before:top-0 before:-mt-1 before:mr-4 before:size-3 before:rotate-45 before:bg-neutral-100"
+      class="absolute right-0 z-[1000] mt-4 animate-fade-in select-none rounded-12 bg-neutral-100 shadow-pink-drop-shadow animation-duration-150 before:absolute before:right-0 before:top-0 before:-mt-1 before:mr-4 before:size-3 before:rotate-45 before:bg-neutral-100"
       :class="isDropdownOpen ? 'block' : 'hidden'"
     >
+      <!-- Profile -->
       <lukso-button
         v-if="activePage('index')"
         variant="text"
@@ -71,6 +63,8 @@ onUnmounted(() => {
           {{ $formatMessage('header_my_profile') }}
         </span>
       </lukso-button>
+
+      <!-- Dashboard (my.up.cloud) -->
       <lukso-button
         variant="text"
         custom-class="text-12 nav-apax-12-medium-uppercase"
@@ -81,6 +75,8 @@ onUnmounted(() => {
           {{ $formatMessage('header_relayer_dashboard') }}
         </span>
       </lukso-button>
+
+      <!-- Settings -->
       <lukso-button
         variant="text"
         custom-class="text-12 nav-apax-12-medium-uppercase"
@@ -91,6 +87,8 @@ onUnmounted(() => {
           {{ $formatMessage('header_settings') }}
         </span>
       </lukso-button>
+
+      <!-- Disconnect -->
       <lukso-button
         variant="text"
         custom-class="text-12 nav-apax-12-medium-uppercase"
diff --git a/components/AppNotFound.vue b/components/AppNotFound.vue
index bb786807..dedd982c 100644
--- a/components/AppNotFound.vue
+++ b/components/AppNotFound.vue
@@ -6,7 +6,12 @@ const handleVisitHomepage = () => {
 }
 
 const handleGetHelp = () => {
-  window.open(formatMessage('not_found_get_help_url'), '_blank')
+  navigateTo(formatMessage('not_found_get_help_url'), {
+    external: true,
+    open: {
+      target: '_blank',
+    },
+  })
 }
 </script>
 
diff --git a/components/AppPageLoader.vue b/components/AppPageLoader.vue
index 5cd041f9..9cdcb625 100644
--- a/components/AppPageLoader.vue
+++ b/components/AppPageLoader.vue
@@ -14,7 +14,7 @@ const isLoaded = computed(() => !isLoading.value)
 <template>
   <div class="relative">
     <div
-      class="relative px-4 py-6 sm:py-20"
+      class="relative px-4 pb-20 pt-6 sm:pt-20"
       :class="{
         'opacity-0': !isLoaded,
         'animate-fade-in opacity-100 transition-opacity delay-200  duration-300':
diff --git a/components/AssetAssets3D.vue b/components/AssetAssets3D.vue
index ae43f2a3..0076e320 100644
--- a/components/AssetAssets3D.vue
+++ b/components/AssetAssets3D.vue
@@ -19,7 +19,7 @@ const handleClick = () => {
 
 <template>
   <div
-    class="paragraph-inter-10-bold-uppercase flex size-14 cursor-pointer flex-col items-center justify-center rounded-8 border border-neutral-90 bg-neutral-100 bg-cover transition hover:scale-[1.02] hover:shadow-neutral-drop-shadow"
+    class="paragraph-inter-10-bold-uppercase flex size-14 cursor-pointer flex-col items-center justify-center rounded-8 border border-neutral-90 bg-neutral-100 bg-cover transition hover:scale-[1.02] hover:border-transparent hover:shadow-neutral-shadow-round"
     @click="handleClick"
   >
     <lukso-icon name="cube-outline" class="mb-1"></lukso-icon>
diff --git a/components/AssetAssetsAudio.vue b/components/AssetAssetsAudio.vue
index 3509ef92..3adde634 100644
--- a/components/AssetAssetsAudio.vue
+++ b/components/AssetAssetsAudio.vue
@@ -19,7 +19,7 @@ const handleClick = () => {
 
 <template>
   <div
-    class="paragraph-inter-10-bold-uppercase flex size-14 cursor-pointer flex-col items-center justify-center rounded-8 border border-neutral-90 bg-neutral-100 bg-cover transition hover:scale-[1.02] hover:shadow-neutral-drop-shadow"
+    class="paragraph-inter-10-bold-uppercase flex size-14 cursor-pointer flex-col items-center justify-center rounded-8 border border-neutral-90 bg-neutral-100 bg-cover transition hover:scale-[1.02] hover:border-transparent hover:shadow-neutral-shadow-round"
     @click="handleClick"
   >
     <lukso-icon name="headset-outline" class="mb-1"></lukso-icon>
diff --git a/components/AssetAssetsContract.vue b/components/AssetAssetsContract.vue
index f972ffcc..023ad66f 100644
--- a/components/AssetAssetsContract.vue
+++ b/components/AssetAssetsContract.vue
@@ -12,7 +12,7 @@ const handleClick = () => {
 
 <template>
   <div
-    class="paragraph-inter-10-bold-uppercase flex size-14 cursor-pointer flex-col items-center justify-center rounded-8 border border-neutral-90 bg-neutral-100 bg-cover transition hover:scale-[1.02] hover:shadow-neutral-drop-shadow"
+    class="paragraph-inter-10-bold-uppercase flex size-14 cursor-pointer flex-col items-center justify-center rounded-8 border border-neutral-90 bg-neutral-100 bg-cover transition hover:scale-[1.02] hover:border-transparent hover:shadow-neutral-shadow-round"
     @click="handleClick"
   >
     <lukso-icon name="smart-contract-doc" class="mb-1"></lukso-icon>
diff --git a/components/AssetAssetsDocument.vue b/components/AssetAssetsDocument.vue
index 5a42f476..40980eb2 100644
--- a/components/AssetAssetsDocument.vue
+++ b/components/AssetAssetsDocument.vue
@@ -6,13 +6,20 @@ type Props = {
 const props = defineProps<Props>()
 
 const handleClick = () => {
-  props?.asset && 'url' in props.asset && window.open(props.asset.url, '_blank')
+  if (props.asset && 'url' in props.asset) {
+    navigateTo(props.asset.url, {
+      external: true,
+      open: {
+        target: '_blank',
+      },
+    })
+  }
 }
 </script>
 
 <template>
   <div
-    class="paragraph-inter-10-bold-uppercase flex size-14 cursor-pointer flex-col items-center justify-center rounded-8 border border-neutral-90 bg-neutral-100 bg-cover transition hover:scale-[1.02] hover:shadow-neutral-drop-shadow"
+    class="paragraph-inter-10-bold-uppercase flex size-14 cursor-pointer flex-col items-center justify-center rounded-8 border border-neutral-90 bg-neutral-100 bg-cover transition hover:scale-[1.02] hover:border-transparent hover:shadow-neutral-shadow-round"
     @click="handleClick"
   >
     <lukso-icon name="document-outline" class="mb-1"></lukso-icon>
diff --git a/components/AssetAssetsImage.vue b/components/AssetAssetsImage.vue
index 1916574f..22bacaaa 100644
--- a/components/AssetAssetsImage.vue
+++ b/components/AssetAssetsImage.vue
@@ -24,7 +24,7 @@ const handleClick = () => {
 
 <template>
   <div
-    class="paragraph-inter-10-bold-uppercase flex size-14 cursor-pointer flex-col items-center justify-center rounded-8 border border-neutral-90 bg-neutral-100 bg-cover transition hover:scale-[1.02] hover:shadow-neutral-drop-shadow"
+    class="paragraph-inter-10-bold-uppercase flex size-14 cursor-pointer flex-col items-center justify-center rounded-8 border border-neutral-90 bg-neutral-100 bg-cover transition hover:scale-[1.02] hover:border-transparent hover:shadow-neutral-shadow-round"
     @click="handleClick"
   >
     <lukso-icon name="camera" class="mb-1"></lukso-icon>
diff --git a/components/AssetAssetsOther.vue b/components/AssetAssetsOther.vue
index 17412747..3e9c8914 100644
--- a/components/AssetAssetsOther.vue
+++ b/components/AssetAssetsOther.vue
@@ -6,13 +6,20 @@ type Props = {
 const props = defineProps<Props>()
 
 const handleClick = () => {
-  'url' in props.asset && window.open(props.asset.url, '_blank')
+  if (props.asset && 'url' in props.asset) {
+    navigateTo(props.asset.url, {
+      external: true,
+      open: {
+        target: '_blank',
+      },
+    })
+  }
 }
 </script>
 
 <template>
   <div
-    class="paragraph-inter-10-bold-uppercase flex size-14 cursor-pointer flex-col items-center justify-center rounded-8 border border-neutral-90 bg-neutral-100 bg-cover transition hover:scale-[1.02] hover:shadow-neutral-drop-shadow"
+    class="paragraph-inter-10-bold-uppercase flex size-14 cursor-pointer flex-col items-center justify-center rounded-8 border border-neutral-90 bg-neutral-100 bg-cover transition hover:scale-[1.02] hover:border-transparent hover:shadow-neutral-shadow-round"
     @click="handleClick"
   >
     <lukso-icon name="document-outline" class="mb-1"></lukso-icon>
diff --git a/components/AssetAssetsVideo.vue b/components/AssetAssetsVideo.vue
index 65a8d721..4b78ea98 100644
--- a/components/AssetAssetsVideo.vue
+++ b/components/AssetAssetsVideo.vue
@@ -19,7 +19,7 @@ const handleClick = () => {
 
 <template>
   <div
-    class="paragraph-inter-10-bold-uppercase flex size-14 cursor-pointer flex-col items-center justify-center rounded-8 border border-neutral-90 bg-neutral-100 bg-cover transition hover:scale-[1.02] hover:shadow-neutral-drop-shadow"
+    class="paragraph-inter-10-bold-uppercase flex size-14 cursor-pointer flex-col items-center justify-center rounded-8 border border-neutral-90 bg-neutral-100 bg-cover transition hover:scale-[1.02] hover:border-transparent hover:shadow-neutral-shadow-round"
     @click="handleClick"
   >
     <lukso-icon name="video-outline" class="mb-1"></lukso-icon>
diff --git a/components/AssetImage.vue b/components/AssetImage.vue
index 7c81dc55..eafbe5c4 100644
--- a/components/AssetImage.vue
+++ b/components/AssetImage.vue
@@ -38,10 +38,12 @@ const handleLoad = () => {
 
 const handleOpenVerificationDocs = (event: Event) => {
   event.stopPropagation()
-  window.open(
-    'https://docs.lukso.tech/learn/assets#generate-the-json-file',
-    '_blank'
-  )
+  navigateTo('https://docs.lukso.tech/learn/assets#generate-the-json-file', {
+    external: true,
+    open: {
+      target: '_blank',
+    },
+  })
 }
 
 const isVerificationInvalid = computed(
diff --git a/components/AssetImagesList.vue b/components/AssetImagesList.vue
index d7adaad9..2b45ab2e 100644
--- a/components/AssetImagesList.vue
+++ b/components/AssetImagesList.vue
@@ -34,7 +34,7 @@ const handlePreviewImage = (image: Image[]) => {
         <div
           v-for="(image, index) in optimizedImages"
           :key="index"
-          class="rounded-8 bg-neutral-90 transition hover:scale-[1.02] hover:shadow-neutral-drop-shadow"
+          class="rounded-8 bg-neutral-90 transition hover:scale-[1.02] hover:shadow-neutral-shadow-round"
         >
           <AssetImage
             class="max-h-14 min-h-14 w-14 cursor-pointer rounded-8"
diff --git a/components/BuyLyxCard.vue b/components/BuyLyxCard.vue
index 3aa42542..cd8e8961 100644
--- a/components/BuyLyxCard.vue
+++ b/components/BuyLyxCard.vue
@@ -8,7 +8,12 @@ type Props = {
 const props = defineProps<Props>()
 
 const handleBuyLyx = () => {
-  window.open(props.buyUrl, '_blank')
+  navigateTo(props.buyUrl, {
+    external: true,
+    open: {
+      target: '_blank',
+    },
+  })
 }
 </script>
 
diff --git a/components/CreationsCarousel.vue b/components/CreationsCarousel.vue
index 431133f1..26b911a6 100644
--- a/components/CreationsCarousel.vue
+++ b/components/CreationsCarousel.vue
@@ -57,9 +57,9 @@ const styleVariants = tv({
     rightShadow:
       'absolute bottom-[30px] right-[60px] h-[305px] w-[272px] rotate-90 rounded-[305px] bg-neutral-20 opacity-20 blur-[34px]',
     leftNavigation:
-      'absolute left-[20px] top-[calc(50%-45px)] z-10 cursor-pointer select-none rounded-8 border border-neutral-90 bg-neutral-100 p-2 transition hover:scale-[1.05] hover:border-neutral-80 active:scale-[0.99] lg:left-[-20px]',
+      'absolute left-[20px] top-[calc(50%-45px)] z-10 cursor-pointer select-none rounded-8 border border-neutral-90 bg-neutral-100 p-2 transition hover:scale-105 hover:border-neutral-80 active:scale-[0.99] lg:left-[-20px]',
     rightNavigation:
-      'absolute right-[20px] top-[calc(50%-45px)] z-10 cursor-pointer select-none rounded-8 border border-neutral-90 bg-neutral-100 p-2 transition hover:scale-[1.05] hover:border-neutral-80 active:scale-[0.99] lg:right-[-20px]',
+      'absolute right-[20px] top-[calc(50%-45px)] z-10 cursor-pointer select-none rounded-8 border border-neutral-90 bg-neutral-100 p-2 transition hover:scale-105 hover:border-neutral-80 active:scale-[0.99] lg:right-[-20px]',
   },
   variants: {
     isSingleSlide: {
diff --git a/components/DappShowcase.vue b/components/DappShowcase.vue
index 1a7047b4..2a1f42be 100644
--- a/components/DappShowcase.vue
+++ b/components/DappShowcase.vue
@@ -4,7 +4,12 @@ import { Navigation, Pagination } from 'swiper/modules'
 const SHOWCASE_ITEM_COUNT = 8
 
 const handleCardClick = (url: string) => {
-  window.open(url, '_blank')
+  navigateTo(url, {
+    external: true,
+    open: {
+      target: '_blank',
+    },
+  })
 }
 </script>
 
@@ -35,9 +40,12 @@ const handleCardClick = (url: string) => {
         clickableClass: 'swiper-pagination-clickable',
       }"
       :breakpoints="{
-        1300: {
+        1400: {
           slidesPerView: 5,
         },
+        1300: {
+          slidesPerView: 4,
+        },
         1024: {
           slidesPerView: 3,
         },
@@ -45,7 +53,7 @@ const handleCardClick = (url: string) => {
           slidesPerView: 2,
         },
       }"
-      class="w-[calc(100vw-48px)] lg:w-full"
+      class="w-[calc(100vw-48px)] max-w-[1200px] xl:w-full"
     >
       <SwiperSlide
         v-for="index in SHOWCASE_ITEM_COUNT"
@@ -78,12 +86,12 @@ const handleCardClick = (url: string) => {
     <lukso-icon
       name="arrow-left-lg"
       id="prev"
-      class="absolute left-[20px] top-[calc(50%-45px)] z-10 cursor-pointer select-none rounded-8 border border-neutral-90 bg-neutral-100 p-2 transition hover:scale-[1.05] hover:border-neutral-80 active:scale-[0.99] lg:left-[-60px]"
+      class="absolute left-[20px] top-[calc(50%-45px)] z-10 cursor-pointer select-none rounded-8 border border-neutral-90 bg-neutral-100 p-2 transition hover:scale-105 hover:border-neutral-80 active:scale-[0.99] xl:left-[-60px]"
     ></lukso-icon>
     <lukso-icon
       name="arrow-right-lg"
       id="next"
-      class="absolute right-[20px] top-[calc(50%-45px)] z-10 cursor-pointer select-none rounded-8 border border-neutral-90 bg-neutral-100 p-2 transition hover:scale-[1.05] hover:border-neutral-80 active:scale-[0.99] lg:right-[-60px]"
+      class="absolute right-[20px] top-[calc(50%-45px)] z-10 cursor-pointer select-none rounded-8 border border-neutral-90 bg-neutral-100 p-2 transition hover:scale-105 hover:border-neutral-80 active:scale-[0.99] xl:right-[-60px]"
     ></lukso-icon>
   </div>
 </template>
diff --git a/components/FollowButton.vue b/components/FollowButton.vue
index 73a871ad..7384f15f 100644
--- a/components/FollowButton.vue
+++ b/components/FollowButton.vue
@@ -14,6 +14,7 @@ const queryClient = useQueryClient()
 const { selectedChainId: chainId } = useAppStore()
 const { isConnected, isMobile } = storeToRefs(useAppStore())
 const { connect } = useBaseProvider()
+const { browserSupportExtension } = useBrowser()
 
 const address = computed(() => props.address?.toLowerCase() as Address)
 const profileFollowers = useFollowingSystem().getFollowersData(address)
@@ -93,7 +94,15 @@ const handleClick = async (event: Event) => {
 
   // when we are not connected, we need to connect first
   if (!isConnected.value) {
-    await connect()
+    try {
+      isPending.value = true
+      await connect()
+    } catch (error) {
+      console.warn(error)
+    } finally {
+      isPending.value = false
+    }
+
     invalidateQueries()
 
     // stop if we want to follow ourselves
@@ -196,6 +205,7 @@ const handleUnfollow = () => {
           isMobile ? '' : formatMessage('profile_card_unfollow_button')
         "
         :is-icon="isMobile ? true : undefined"
+        :disabled="!browserSupportExtension && !isMobile ? true : undefined"
         @click="handleClick"
       >
         <lukso-icon
@@ -221,6 +231,7 @@ const handleUnfollow = () => {
           isMobile ? '' : formatMessage('profile_card_following_button')
         "
         :is-icon="isMobile ? true : undefined"
+        :disabled="!browserSupportExtension && !isMobile ? true : undefined"
       >
         <lukso-icon
           name="profile"
@@ -242,6 +253,7 @@ const handleUnfollow = () => {
         "
         @click="handleClick"
         :is-icon="isMobile ? true : undefined"
+        :disabled="!browserSupportExtension && !isMobile ? true : undefined"
       >
         <lukso-icon
           name="profile-add"
diff --git a/components/ModalTemplateAddEditGrid.vue b/components/ModalTemplateAddEditGrid.vue
new file mode 100644
index 00000000..43b055f3
--- /dev/null
+++ b/components/ModalTemplateAddEditGrid.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+const { modal, closeModal } = useModal<Partial<Grid>>()
+const { formatMessage } = useIntl()
+const { tempGrid, selectedGridId } = storeToRefs(useGridStore())
+const { addGrid, updateGrid } = useGrid()
+const id = computed(() => modal?.data?.id)
+const isEdit = computed(() => !!id.value)
+const {
+  inputValues,
+  canSubmit,
+  getFieldErrorMessage,
+  handleFieldChange,
+  handleFormErrors,
+  handleSelectChange,
+} = useForm(
+  gridInputSchema,
+  (
+    await gridInputSchema
+      .partial({ title: true })
+      ?.safeParseAsync(modal?.data || {})
+  )?.data
+)
+
+const gridColumnsOptions = computed(() => {
+  return Array.from({ length: GRID_COLUMNS_MAX - GRID_COLUMNS_MIN + 1 }).map(
+    (_, index) => ({
+      id: index + GRID_COLUMNS_MIN,
+      value: index + GRID_COLUMNS_MIN,
+    })
+  )
+})
+
+const selectedGridColumns = computed(() => {
+  return gridColumnsOptions.value.find(
+    option =>
+      option.id === (inputValues.value as { gridColumns: number }).gridColumns
+  )
+})
+
+const handleCancel = () => {
+  closeModal()
+}
+
+const handleSave = async () => {
+  if (!canSubmit.value) {
+    return
+  }
+
+  try {
+    const grid = await gridInputSchema?.parseAsync(inputValues.value)
+
+    if (isEdit.value) {
+      updateGrid(id.value, {
+        ...grid,
+      })
+    } else {
+      const newGrid: Grid = {
+        id: createGridId(grid, tempGrid.value),
+        ...grid,
+        grid: [],
+      }
+
+      addGrid(newGrid)
+      selectedGridId.value = newGrid.id
+    }
+
+    handleCancel()
+  } catch (error: unknown) {
+    handleFormErrors(error)
+  }
+}
+</script>
+
+<template>
+  <div class="p-6">
+    <div class="heading-inter-21-semi-bold pb-4">
+      {{ formatMessage(isEdit ? 'edit_grid_title' : 'add_grid_title') }}
+    </div>
+    <div class="paragraph-inter-14-regular pb-6">
+      {{
+        formatMessage(isEdit ? 'edit_grid_description' : 'add_grid_description')
+      }}
+    </div>
+
+    <div class="flex flex-col gap-4">
+      <!-- Title -->
+      <lukso-input
+        .value="inputValues.title"
+        :placeholder="formatMessage('add_grid_title_placeholder')"
+        :error="getFieldErrorMessage('title')"
+        :label="formatMessage('add_grid_title_label')"
+        is-full-width
+        autofocus
+        @on-input="
+          (customEvent: CustomEvent) => handleFieldChange(customEvent, 'title')
+        "
+      ></lukso-input>
+
+      <!-- Column number -->
+      <lukso-select
+        :value="JSON.stringify(selectedGridColumns)"
+        :options="JSON.stringify(gridColumnsOptions)"
+        :label="formatMessage('add_grid_columns_label')"
+        is-full-width
+        @on-select="
+          (customEvent: CustomEvent) =>
+            handleSelectChange(customEvent, 'gridColumns')
+        "
+      ></lukso-select>
+    </div>
+
+    <!-- Buttons -->
+    <div class="grid grid-cols-[max-content,auto] pt-6">
+      <lukso-button variant="text" @click="handleCancel">
+        {{ formatMessage('add_widget_cancel') }}
+      </lukso-button>
+      <lukso-button
+        :disabled="!canSubmit ? true : undefined"
+        variant="landing"
+        is-full-width
+        @click="handleSave"
+      >
+        {{ formatMessage('add_widget_confirm') }}
+      </lukso-button>
+    </div>
+  </div>
+</template>
diff --git a/components/ModalTemplateAddGridWidget.vue b/components/ModalTemplateAddGridWidget.vue
new file mode 100644
index 00000000..07b4b605
--- /dev/null
+++ b/components/ModalTemplateAddGridWidget.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const { modal } = useModal<Partial<GridWidget>>()
+</script>
+
+<template>
+  <AddWidget
+    :properties="modal?.data?.properties"
+    :id="modal?.data?.i"
+    :width="modal?.data?.w"
+    :height="modal?.data?.h"
+    :type="modal?.data?.type"
+  />
+</template>
diff --git a/components/ModalTemplateConnectWallet.vue b/components/ModalTemplateConnectWallet.vue
index e9e426f1..e29a9281 100644
--- a/components/ModalTemplateConnectWallet.vue
+++ b/components/ModalTemplateConnectWallet.vue
@@ -5,6 +5,7 @@ const { isUniversalProfileExtension, connect: connectBrowserExtension } =
   useBrowserExtensionProvider()
 const { isConnecting, isMobile } = storeToRefs(useAppStore())
 const isWalletConnect = ref(false)
+const { browserSupportExtension, extensionStore } = useBrowser()
 
 const handleConnectBrowser = async () => {
   // if not supported browser
@@ -14,7 +15,10 @@ const handleConnectBrowser = async () => {
 
   // extension not installed then link to store
   if (!isUniversalProfileExtension) {
-    return window.open(extensionStore.value.url, '_blank')
+    return navigateTo(extensionStore.value.url, {
+      external: true,
+      open: { target: '_blank' },
+    })
   }
 
   await connectBrowserExtension()
@@ -23,18 +27,6 @@ const handleConnectBrowser = async () => {
 const handleToggleMobile = () => {
   isWalletConnect.value = !isWalletConnect.value
 }
-
-const extensionStore = computed(() => {
-  const url = browserInfo().storeLink
-  const icon = `logo-${browserInfo().id}`
-
-  return {
-    icon,
-    url,
-  }
-})
-
-const browserSupportExtension = computed(() => extensionStore.value.url !== '')
 </script>
 
 <template>
@@ -61,7 +53,7 @@ const browserSupportExtension = computed(() => extensionStore.value.url !== '')
           'flex-col-reverse': isMobile,
           'flex-col': !isMobile,
         }"
-        class="flex gap-2"
+        class="flex w-full gap-2"
       >
         <lukso-button
           variant="secondary"
@@ -86,11 +78,11 @@ const browserSupportExtension = computed(() => extensionStore.value.url !== '')
             )
           }}
         </lukso-button>
-        <WalletConnectButton v-if="false" />
+        <WalletConnectButton v-if="isMobile" />
         <lukso-button
+          v-else
           variant="secondary"
           is-full-width
-          disabled
           @click="handleToggleMobile"
         >
           <lukso-icon name="phone-portrait-outline" class="mr-2"></lukso-icon>
@@ -99,7 +91,6 @@ const browserSupportExtension = computed(() => extensionStore.value.url !== '')
               'modal_connect_wallet_select_provider_connect_mobile_button'
             )
           }}
-          (soon)
         </lukso-button>
       </div>
       <div class="paragraph-inter-12-regular mt-4 text-neutral-40">
@@ -116,7 +107,7 @@ const browserSupportExtension = computed(() => extensionStore.value.url !== '')
         {{ formatMessage('modal_connect_wallet_mobile_scan_text') }}
       </div>
       <WalletConnectQrCode
-        class="flex items-center justify-center pb-6 pt-4"
+        class="flex items-center justify-center"
         @disconnect="handleToggleMobile"
       />
     </div>
diff --git a/components/ModalTemplateDefault.vue b/components/ModalTemplateDefault.vue
index 4bbd301f..cec99da9 100644
--- a/components/ModalTemplateDefault.vue
+++ b/components/ModalTemplateDefault.vue
@@ -7,7 +7,7 @@ const { modal, closeModal } = useModal()
   <div class="flex flex-col rounded-12 bg-neutral-98 p-6 text-center">
     <img
       :src="modal?.data?.icon || '/images/up-error.png'"
-      class="mx-auto mb-6 max-w-[150px]"
+      class="mx-auto mb-6 mt-4 max-w-[150px]"
       alt=""
     />
     <div class="heading-inter-21-semi-bold pb-4">
diff --git a/components/ModalTemplateDeleteGrid.vue b/components/ModalTemplateDeleteGrid.vue
new file mode 100644
index 00000000..d86505a5
--- /dev/null
+++ b/components/ModalTemplateDeleteGrid.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+const { closeModal, modal } = useModal()
+const { formatMessage } = useIntl()
+const { removeGrid } = useGrid()
+
+const handleDelete = async () => {
+  removeGrid(modal?.data?.id)
+  closeModal()
+}
+</script>
+
+<template>
+  <div class="flex flex-col rounded-12 bg-neutral-98 p-6 text-center">
+    <div class="heading-inter-21-semi-bold pb-4">
+      {{ formatMessage('modal_delete_grid_title') }}
+    </div>
+    <div class="paragraph-inter-16-regular">
+      <lukso-sanitize
+        :html-content="
+          formatMessage('modal_delete_grid_content', {
+            title: `<strong>${modal?.data?.title}</strong>`,
+          })
+        "
+      ></lukso-sanitize>
+    </div>
+    <div class="grid grid-cols-[max-content,auto]">
+      <lukso-button variant="text" @click="closeModal" class="mt-6">
+        {{ formatMessage('modal_delete_grid_cancel') }}
+      </lukso-button>
+      <lukso-button
+        variant="danger"
+        is-full-width
+        @click="handleDelete"
+        class="mt-6"
+      >
+        {{ formatMessage('modal_delete_grid_confirm') }}
+      </lukso-button>
+    </div>
+  </div>
+</template>
diff --git a/components/ModalTemplateDeleteGridWidget.vue b/components/ModalTemplateDeleteGridWidget.vue
new file mode 100644
index 00000000..ae681a14
--- /dev/null
+++ b/components/ModalTemplateDeleteGridWidget.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+const { closeModal, modal } = useModal()
+const { formatMessage } = useIntl()
+const { removeGridWidget } = useGrid()
+
+const handleDelete = async () => {
+  removeGridWidget(modal?.data?.id)
+  closeModal()
+}
+</script>
+
+<template>
+  <div class="flex flex-col rounded-12 bg-neutral-98 p-6 text-center">
+    <div class="heading-inter-21-semi-bold pb-4">
+      {{ formatMessage('modal_delete_widget_title') }}
+    </div>
+    <div class="paragraph-inter-16-regular">
+      <lukso-sanitize
+        :html-content="formatMessage('modal_delete_widget_content')"
+      ></lukso-sanitize>
+    </div>
+    <div class="grid grid-cols-[max-content,auto]">
+      <lukso-button variant="text" @click="closeModal" class="mt-6">
+        {{ formatMessage('modal_delete_widget_cancel') }}
+      </lukso-button>
+      <lukso-button
+        variant="danger"
+        is-full-width
+        @click="handleDelete"
+        class="mt-6"
+      >
+        {{ formatMessage('modal_delete_widget_confirm') }}
+      </lukso-button>
+    </div>
+  </div>
+</template>
diff --git a/components/ModalTemplateExternalAddGridWidget.vue b/components/ModalTemplateExternalAddGridWidget.vue
new file mode 100644
index 00000000..4f4ce7c4
--- /dev/null
+++ b/components/ModalTemplateExternalAddGridWidget.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+const { modal, closeModal } = useModal<Partial<GridWidget>>()
+const { formatMessage } = useIntl()
+const { isConnecting, isConnected, connectedProfileAddress } =
+  storeToRefs(useAppStore())
+const { addGridWidget, initializeGrid } = useGrid()
+const { tempGrid, isEditingGrid } = storeToRefs(useGridStore())
+const { connect } = useBaseProvider()
+const newWidget = ref<GridWidgetWithoutCords | undefined>()
+
+const handleAddWidget = async () => {
+  if (!newWidget.value) {
+    console.warn('Missing widget data')
+    return
+  }
+
+  if (!isConnected.value) {
+    await connect()
+  }
+
+  // external source:  we need to toggle edit mode
+  isEditingGrid.value = true
+
+  // we will widget add to first grid
+  let grid = tempGrid.value[0]
+
+  // if grid is not initialized, initialize it
+  if (!grid) {
+    await initializeGrid(connectedProfileAddress.value, true)
+    grid = tempGrid.value[0]
+  }
+
+  addGridWidget(newWidget.value, grid)
+  closeModal()
+  navigateTo(profileRoute(connectedProfileAddress.value))
+}
+
+onMounted(async () => {
+  try {
+    // check if the widget data is valid
+    await gridWidgetWithoutCordsSchema
+      .omit({ i: true })
+      .partial({
+        w: true,
+        h: true,
+      })
+      .parseAsync(modal.data)
+
+    if (!modal?.data?.type) {
+      throw new Error('Missing widget type')
+    }
+
+    // check if properties for given widget type is valid
+    const schemaMap = WIDGET_SCHEMA_MAP[modal?.data?.type]
+    await schemaMap?.input?.safeParseAsync(modal?.data?.properties)
+
+    newWidget.value = createWidgetObject({
+      type: modal?.data?.type,
+      properties: modal?.data?.properties,
+      w: modal?.data?.w,
+      h: modal?.data?.h,
+    })
+  } catch (error) {
+    console.warn(error)
+    closeModal()
+  }
+})
+</script>
+
+<template>
+  <div class="flex flex-col rounded-12 bg-neutral-98 p-6 text-center">
+    <img
+      src="/images/grid.svg"
+      class="mx-auto mb-6 mt-4 max-w-[150px]"
+      alt=""
+    />
+    <div class="heading-inter-21-semi-bold pb-4">
+      {{ formatMessage('modal_external_add_grid_widget_title') }}
+    </div>
+    <div class="paragraph-inter-16-regular">
+      <lukso-sanitize
+        :html-content="
+          formatMessage('modal_external_add_grid_widget_description')
+        "
+      ></lukso-sanitize>
+    </div>
+    <div class="grid grid-cols-[max-content,auto]">
+      <lukso-button variant="text" @click="closeModal" class="mt-6">
+        {{ formatMessage('modal_external_add_grid_widget_cancel') }}
+      </lukso-button>
+      <lukso-button
+        :is-loading="isConnecting ? true : undefined"
+        :loading-text="formatMessage('modal_external_add_grid_widget_confirm')"
+        variant="landing"
+        is-full-width
+        class="mt-6"
+        @click="handleAddWidget"
+      >
+        {{ formatMessage('modal_external_add_grid_widget_confirm') }}
+      </lukso-button>
+    </div>
+  </div>
+</template>
diff --git a/components/ModalTemplateGridWidgetCloned.vue b/components/ModalTemplateGridWidgetCloned.vue
new file mode 100644
index 00000000..75f45047
--- /dev/null
+++ b/components/ModalTemplateGridWidgetCloned.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+const { closeModal } = useModal()
+const { formatMessage } = useIntl()
+const { connectedProfileAddress } = storeToRefs(useAppStore())
+
+const handleConfirm = async () => {
+  await navigateTo(profileRoute(connectedProfileAddress.value))
+  closeModal()
+}
+</script>
+
+<template>
+  <div class="flex flex-col rounded-12 bg-neutral-98 p-6 text-center">
+    <div class="heading-inter-21-semi-bold pb-4">
+      {{ formatMessage('modal_clone_widget_title') }}
+    </div>
+    <div class="paragraph-inter-16-regular">
+      <lukso-sanitize
+        :html-content="formatMessage('modal_clone_widget_content')"
+      ></lukso-sanitize>
+    </div>
+    <div class="grid grid-cols-[max-content,auto]">
+      <lukso-button variant="text" @click="closeModal" class="mt-6">
+        {{ formatMessage('modal_clone_widget_cancel') }}
+      </lukso-button>
+      <lukso-button
+        variant="landing"
+        is-full-width
+        @click="handleConfirm"
+        class="mt-6"
+      >
+        {{ formatMessage('modal_clone_widget_confirm') }}
+      </lukso-button>
+    </div>
+  </div>
+</template>
diff --git a/components/ModalTemplateMobileFilters.vue b/components/ModalTemplateMobileFilters.vue
index 51befdea..f8b9dd36 100644
--- a/components/ModalTemplateMobileFilters.vue
+++ b/components/ModalTemplateMobileFilters.vue
@@ -3,12 +3,10 @@ const { formatMessage } = useIntl()
 const { closeModal } = useModal()
 const { isGraph } = storeToRefs(useAppStore())
 const viewedProfileAddress = getCurrentProfileAddress()
-const assetsData = useProfileAssetsGraph()({
-  profileAddress: viewedProfileAddress,
-})
+const assetsData = useProfileAssetsGraph()(viewedProfileAddress)
 const assets = computed(() => {
   return (
-    assetsData.data.value
+    assetsData.value
       // filter by owned/created
       ?.filter(asset => {
         switch (filters.assetType) {
diff --git a/components/ModalTemplateMoveGridWidget.vue b/components/ModalTemplateMoveGridWidget.vue
new file mode 100644
index 00000000..d9e7ac38
--- /dev/null
+++ b/components/ModalTemplateMoveGridWidget.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import type { SelectStringOption } from '@lukso/web-components'
+
+const { modal, closeModal } = useModal()
+const { formatMessage } = useIntl()
+const { tempGrid, selectedGridId } = storeToRefs(useGridStore())
+const { addGridWidget, removeGridWidget, getGridById } = useGrid()
+const selectedOption = ref<string>()
+
+const canSubmit = computed(() => selectedOption.value !== selectedGridId.value)
+
+const options = computed<SelectStringOption[]>(() => {
+  return tempGrid.value.map(grid => ({
+    id: grid.id,
+    value: grid.title,
+  }))
+})
+
+const selectedOptionValue = computed(() => {
+  const grid = tempGrid.value.find(grid => grid.id === selectedOption.value)
+  return {
+    id: grid?.id,
+    value: grid?.title,
+  }
+})
+
+const handleChange = async (customEvent: CustomEvent) => {
+  const option = customEvent.detail.value as SelectStringOption
+
+  selectedOption.value = option.id
+}
+
+const handleCancel = () => {
+  closeModal()
+}
+
+const handleSave = () => {
+  if (!canSubmit.value) {
+    return
+  }
+
+  const duplicatedWidget = createWidgetObject({
+    type: modal?.data?.type,
+    properties: modal?.data?.properties,
+    w: modal?.data?.w,
+    h: modal?.data?.h,
+  })
+
+  removeGridWidget(modal?.data?.id)
+  addGridWidget(
+    duplicatedWidget,
+    getGridById(tempGrid.value, selectedOption.value)
+  )
+  handleCancel()
+}
+
+onMounted(() => {
+  selectedOption.value = selectedGridId.value
+})
+</script>
+
+<template>
+  <div class="p-6">
+    <div class="heading-inter-21-semi-bold pb-4">
+      {{ formatMessage('move_widget_title') }}
+    </div>
+    <div class="paragraph-inter-14-regular pb-6">
+      {{ formatMessage('move_widget_description') }}
+    </div>
+
+    <lukso-select
+      :value="JSON.stringify(selectedOptionValue)"
+      :options="JSON.stringify(options)"
+      is-full-width
+      @on-select="handleChange"
+    ></lukso-select>
+
+    <!-- Buttons -->
+    <div class="grid grid-cols-[max-content,auto] pt-6">
+      <lukso-button variant="text" @click="handleCancel">
+        {{ formatMessage('add_widget_cancel') }}
+      </lukso-button>
+      <lukso-button
+        :disabled="!canSubmit ? true : undefined"
+        variant="landing"
+        is-full-width
+        @click="handleSave"
+      >
+        {{ formatMessage('add_widget_confirm') }}
+      </lukso-button>
+    </div>
+  </div>
+</template>
diff --git a/components/ModalTemplateSwitchApplicationNetwork.vue b/components/ModalTemplateSwitchApplicationNetwork.vue
index 5ac191d1..68f5f8f4 100644
--- a/components/ModalTemplateSwitchApplicationNetwork.vue
+++ b/components/ModalTemplateSwitchApplicationNetwork.vue
@@ -3,16 +3,17 @@ const { closeModal, modal } = useModal()
 const { formatMessage } = useIntl()
 
 const handleChangeNetwork = async () => {
-  const { selectedChainId } = storeToRefs(useAppStore())
   const { getNetworkByChainId } = useAppStore()
   const { disconnect } = useBaseProvider()
 
-  selectedChainId.value = modal?.data?.chainId
-  await navigateTo({
-    path: homeRoute(),
-    query: { network: getNetworkByChainId(modal?.data?.chainId).id },
-  })
   disconnect()
+  navigateTo(
+    {
+      path: homeRoute(),
+      query: { network: getNetworkByChainId(modal?.data?.chainId).id },
+    },
+    { external: true }
+  )
 }
 </script>
 
diff --git a/components/ModalTemplateTokenCollection.vue b/components/ModalTemplateTokenCollection.vue
index 2e721603..7b9a2d93 100644
--- a/components/ModalTemplateTokenCollection.vue
+++ b/components/ModalTemplateTokenCollection.vue
@@ -77,7 +77,7 @@ const handleViewEntireCollection = () => {
       </lukso-button>
     </div>
     <div
-      class="-mx-4 grid max-h-[calc(100vh-300px)] grid-cols-1 gap-6 overflow-y-auto px-4 pb-6 sm:grid-cols-2 md:grid-cols-3"
+      class="-mx-4 -mt-4 grid max-h-[calc(100vh-300px)] grid-cols-1 gap-6 overflow-y-auto px-4 pb-6 pt-4 sm:grid-cols-2 md:grid-cols-3"
     >
       <NftListCard
         v-for="(token, index) in tokenIdsData"
@@ -85,7 +85,7 @@ const handleViewEntireCollection = () => {
         :asset="token"
       />
       <div
-        class="paragraph-inter-16-semi-bold flex min-h-[400px] cursor-pointer items-center justify-center rounded-12 border border-neutral-90 bg-neutral-100 p-6 transition hover:shadow-neutral-drop-shadow-1xl"
+        class="paragraph-inter-16-semi-bold flex min-h-[400px] cursor-pointer items-center justify-center rounded-12 border border-neutral-90 bg-neutral-100 p-6 transition hover:border-transparent hover:shadow-neutral-shadow-round-1xl"
         @click="handleViewEntireCollection"
       >
         <lukso-icon size="medium" name="eye-show" class="mr-2"></lukso-icon>
diff --git a/components/NftAssetView.vue b/components/NftAssetView.vue
index 544b1abb..aacefdc2 100644
--- a/components/NftAssetView.vue
+++ b/components/NftAssetView.vue
@@ -60,9 +60,14 @@ const handleViewCollection = () => {
 
 const handleBuySellAsset = (event: Event) => {
   event.stopPropagation()
-  window.open(
+  navigateTo(
     universalPageAssetUrl(asset.value?.address, asset.value?.tokenId),
-    '_blank'
+    {
+      external: true,
+      open: {
+        target: '_blank',
+      },
+    }
   )
 }
 </script>
diff --git a/components/ProfileCard.vue b/components/ProfileCard.vue
index cc591cd1..b6e13c9c 100644
--- a/components/ProfileCard.vue
+++ b/components/ProfileCard.vue
@@ -56,7 +56,7 @@ const hasFollowButton = computed(
       :background-url="profileBackground?.url"
       is-full-width
       shadow="small"
-      :border-radius="isMobile ? 'none' : 'medium'"
+      :border-radius="isMobile ? 'none' : 'small'"
       class="-mx-4 -mt-6 w-screen sm:mx-0 sm:mt-0 sm:w-full"
     >
       <div slot="header" class="relative flex size-full flex-col items-center">
@@ -70,7 +70,7 @@ const hasFollowButton = computed(
             :profile-address="viewedProfile?.address"
             size="2x-large"
             has-identicon
-            class="relative z-[1] cursor-pointer rounded-full outline outline-4 outline-neutral-100 transition hover:scale-[1.02]"
+            class="relative z-[1] flex cursor-pointer rounded-full outline outline-4 outline-neutral-100 transition hover:scale-[1.02]"
             @click="handlePreviewProfileImage"
           >
           </lukso-profile>
diff --git a/components/ProfileCardShareUniversalPage.vue b/components/ProfileCardShareUniversalPage.vue
index 753b5a48..bdffaef1 100644
--- a/components/ProfileCardShareUniversalPage.vue
+++ b/components/ProfileCardShareUniversalPage.vue
@@ -6,7 +6,12 @@ type Props = {
 const props = defineProps<Props>()
 
 const handleOpen = () => {
-  window.open(universalPageProfileUrl(props.profile?.address), '_blank')
+  navigateTo(universalPageProfileUrl(props.profile?.address), {
+    external: true,
+    open: {
+      target: '_blank',
+    },
+  })
 }
 </script>
 
diff --git a/components/ProfileCardShareUniversalSwaps.vue b/components/ProfileCardShareUniversalSwaps.vue
index 3d91ce47..2ca1585e 100644
--- a/components/ProfileCardShareUniversalSwaps.vue
+++ b/components/ProfileCardShareUniversalSwaps.vue
@@ -6,7 +6,12 @@ type Props = {
 const props = defineProps<Props>()
 
 const handleOpen = () => {
-  window.open(universalSwapsProfileUrl(props.profile?.address), '_blank')
+  navigateTo(universalSwapsProfileUrl(props.profile?.address), {
+    external: true,
+    open: {
+      target: '_blank',
+    },
+  })
 }
 </script>
 
diff --git a/components/ProfileTabs.vue b/components/ProfileTabs.vue
index fabadb8c..43b427d0 100644
--- a/components/ProfileTabs.vue
+++ b/components/ProfileTabs.vue
@@ -1,15 +1,10 @@
 <script setup lang="ts">
-import type {
-  ProfileViewTab,
-  ProfileViewTabName,
-} from '@/domains/graph/components/ProfileViewGraph.vue'
-
 type Props = {
   tabs?: ProfileViewTab[]
-  activeTab?: ProfileViewTabName
+  activeTab?: FiltersAssetGroup
 }
 
-type Emits = (event: 'activate-tab', value: ProfileViewTabName) => void
+type Emits = (event: 'activate-tab', value: ProfileViewTab) => void
 
 defineProps<Props>()
 const emits = defineEmits<Emits>()
@@ -17,16 +12,18 @@ const { formatMessage } = useIntl()
 </script>
 
 <template>
-  <ul
-    class="mb-4 flex justify-center gap-6 border-b border-b-neutral-90 pb-4 sm:justify-start"
+  <div
+    class="mb-4 flex min-h-11 select-none items-center justify-between border-b border-b-neutral-90 pb-4"
   >
-    <ProfileTabsItem
-      v-for="tab in tabs"
-      :key="tab.id"
-      :label="formatMessage(`profile_tab_${tab.id}`)"
-      :count="tab.count"
-      :is-active="tab.id === activeTab"
-      @click="emits('activate-tab', tab.id)"
-    />
-  </ul>
+    <ul class="flex justify-center gap-6 sm:justify-start">
+      <ProfileTabsItem
+        v-for="tab in tabs"
+        :key="tab.id"
+        :label="formatMessage(`profile_tab_${tab.id}`)"
+        :count="tab.count"
+        :is-active="tab.id === activeTab"
+        @click="emits('activate-tab', tab)"
+      />
+    </ul>
+  </div>
 </template>
diff --git a/components/ProfileTabsItem.vue b/components/ProfileTabsItem.vue
index d747dab4..1d9cef20 100644
--- a/components/ProfileTabsItem.vue
+++ b/components/ProfileTabsItem.vue
@@ -3,8 +3,8 @@ import { tv } from 'tailwind-variants'
 
 type Props = {
   label: string
-  count: number
   isActive: boolean
+  count?: number
 }
 
 const props = defineProps<Props>()
@@ -13,7 +13,7 @@ const styleVariants = tv({
   slots: {
     tab: 'heading-inter-17-semi-bold flex items-center',
     counter:
-      'paragraph-inter-10-semi-bold ml-2 rounded-4 border border-neutral-20 px-1 py-[1px]',
+      'paragraph-inter-10-semi-bold ml-2 rounded-4 border border-neutral-20 px-1 py-px',
   },
   variants: {
     isActive: {
@@ -22,7 +22,7 @@ const styleVariants = tv({
         counter: 'bg-neutral-20 text-neutral-100',
       },
       false: {
-        tab: 'cursor-pointer opacity-50 transition hover:opacity-100 ',
+        tab: 'cursor-pointer opacity-50 transition hover:opacity-100',
         counter: 'bg-transparent text-neutral-20',
       },
     },
diff --git a/domains/rpc/components/ProfileViewRpc.vue b/components/ProfileView.vue
similarity index 52%
rename from domains/rpc/components/ProfileViewRpc.vue
rename to components/ProfileView.vue
index e9c45aa8..1f253e7f 100644
--- a/domains/rpc/components/ProfileViewRpc.vue
+++ b/components/ProfileView.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
+const { gridsForTabs, gridsForDisplay, canEditGrid, initializeGrid } = useGrid()
 const { isOwned, setFilters, filters } = useFilters()
+const { isConnected } = storeToRefs(useAppStore())
 const viewedProfileAddress = getCurrentProfileAddress()
 const viewedProfile = useProfile().getProfile(viewedProfileAddress)
-const assetsData = useProfileAssetsRpc()(viewedProfileAddress)
+const assetsData = useProfileAssets()(viewedProfileAddress)
 const assets = computed(() => assetsData.value || [])
 const isLoadingAssets = computed(() =>
   assets.value.some(asset => asset.isLoading)
@@ -78,24 +80,81 @@ const createdCollectiblesCount = computed(
     ).length
 )
 
-const handleTabChange = (tab: ProfileViewTabName) => {
-  setFilters({ assetGroup: tab }, undefined, true)
+const handleTabChange = (tab: ProfileViewTab) => {
+  setFilters({ assetGroup: tab.id }, undefined, true)
 }
 
-const tabs = computed(() => {
-  return [
-    {
-      id: 'collectibles',
-      count: isOwned.value
-        ? ownedCollectiblesCount.value
-        : createdCollectiblesCount.value,
-    },
-    {
-      id: 'tokens',
-      count: isOwned.value ? ownedTokensCount.value : createdTokensCount.value,
-    },
-  ]
+const tabs = computed<ProfileViewTab[]>(() => {
+  const _tabs = [] as ProfileViewTab[]
+  const grids = canEditGrid.value ? gridsForDisplay.value : gridsForTabs.value
+
+  if (grids.length > 0) {
+    _tabs.push({
+      id: 'grid',
+      count:
+        gridsForDisplay.value.length > 1 ? gridsForDisplay.value.length : 0,
+    })
+  }
+
+  _tabs.push({
+    id: 'collectibles',
+    count: isOwned.value
+      ? ownedCollectiblesCount.value
+      : createdCollectiblesCount.value,
+  })
+  _tabs.push({
+    id: 'tokens',
+    count: isOwned.value ? ownedTokensCount.value : createdTokensCount.value,
+  })
+
+  return _tabs
+})
+
+const activeTab = computed(() => {
+  return filters.assetGroup
 })
+
+const selectBestTab = () => {
+  const route = useRoute()
+  const assetGroup = route.query.assetGroup as FiltersAssetGroup | undefined
+  const grids = canEditGrid.value ? gridsForDisplay.value : gridsForTabs.value
+
+  // if user has grids we switch to grid tab, otherwise we switch to collectibles or tokens
+  const _changeTab = () => {
+    if (grids.length > 0) {
+      setFilters({ assetGroup: 'grid' }, undefined, true)
+    } else if (ownedCollectiblesCount.value > 0) {
+      setFilters({ assetGroup: 'collectibles' }, undefined, true)
+    } else {
+      setFilters({ assetGroup: 'tokens' }, undefined, true)
+    }
+  }
+
+  // if filter is set we don't change it
+  // which might be in case user hit back button
+  if (assetGroup) {
+    // for grid we still need to check if user has grids
+    // in case user connect/disconnect profile without grids
+    if (assetGroup === 'grid') {
+      _changeTab()
+    }
+
+    return
+  }
+
+  _changeTab()
+}
+
+watch(
+  [isConnected, viewedProfileAddress],
+  async () => {
+    // we initialize grid at this point so we can switch tabs if user has no grids
+    await initializeGrid(viewedProfileAddress, canEditGrid.value)
+    // select best tab based for initial display
+    selectBestTab()
+  },
+  { immediate: true }
+)
 </script>
 
 <template>
@@ -111,7 +170,7 @@ const tabs = computed(() => {
       >
         {{ $formatMessage('asset_creations') }}
         <span
-          class="paragraph-inter-10-semi-bold ml-2 rounded-4 border border-neutral-20 bg-neutral-20 px-1 py-[1px] text-neutral-100"
+          class="paragraph-inter-10-semi-bold ml-2 rounded-4 border border-neutral-20 bg-neutral-20 px-1 py-px text-neutral-100"
           >{{ createdCollectiblesCount }}</span
         >
       </div>
@@ -122,12 +181,24 @@ const tabs = computed(() => {
       />
       <div>
         <ProfileTabs
-          :active-tab="filters.assetGroup"
+          :active-tab="activeTab"
           :tabs="tabs"
           @activate-tab="handleTabChange"
           class="mt-20"
         />
-        <ProfileAssets :assets="filteredAssets" :is-loading="isLoadingAssets" />
+        <GridView
+          :class="{
+            'visible relative z-10 opacity-100': activeTab === 'grid',
+            'invisible absolute z-0 h-0 overflow-hidden opacity-0':
+              activeTab !== 'grid',
+          }"
+        />
+        <ProfileAssets
+          v-show="activeTab !== 'grid'"
+          :assets="filteredAssets"
+          :is-loading="isLoadingAssets"
+          class="relative z-10"
+        />
       </div>
     </div>
     <ProfileViewNotUp v-else :address="viewedProfile?.address" />
diff --git a/components/TokenAssetView.vue b/components/TokenAssetView.vue
index 22e78d95..37ba5441 100644
--- a/components/TokenAssetView.vue
+++ b/components/TokenAssetView.vue
@@ -46,7 +46,12 @@ const handlePreviewImage = () => {
 
 const handleBuySellAsset = (event: Event) => {
   event.stopPropagation()
-  window.open(universalSwapsAssetUrl(asset.value?.address), '_blank')
+  navigateTo(universalSwapsAssetUrl(asset.value?.address), {
+    external: true,
+    open: {
+      target: '_blank',
+    },
+  })
 }
 </script>
 
diff --git a/components/TokenListCardLyx.vue b/components/TokenListCardLyx.vue
index 8f481e6a..63e0368e 100644
--- a/components/TokenListCardLyx.vue
+++ b/components/TokenListCardLyx.vue
@@ -22,7 +22,10 @@ const handleShowLyxDetails = () => {
 const handleBuyLyx = (event: Event) => {
   event.stopPropagation()
   if (isTestnet.value) {
-    window.open(TESTNET_FAUCET_URL, '_blank')
+    navigateTo(TESTNET_FAUCET_URL, {
+      external: true,
+      open: { target: '_blank' },
+    })
   } else {
     try {
       assertAddress(viewedProfile?.value?.address, 'profile')
diff --git a/components/WalletConnectButton.vue b/components/WalletConnectButton.vue
index cd16a210..6584f4c8 100644
--- a/components/WalletConnectButton.vue
+++ b/components/WalletConnectButton.vue
@@ -1,17 +1,22 @@
 <script setup lang="ts">
 const { formatMessage } = useIntl()
 const deepLink = ref('')
-const {
-  initProvider,
-  connect: connectWalletConnect,
-  deepLinkParser,
-} = useWalletConnectProvider()
+const { initProvider, connect: connectWalletConnect } =
+  useWalletConnectProvider()
 const { walletConnectProvider: provider } = storeToRefs(useAppStore())
+const isLoading = ref(false)
+
+const handleClick = async () => {
+  isLoading.value = true
+  navigateTo(deepLink.value, { external: true })
+}
 
 onMounted(async () => {
   await initProvider()
   provider.value?.on('display_uri', (data: string) => {
-    deepLink.value = deepLinkParser(data)
+    deepLink.value = walletConnectDeepLinkUrl(data, {
+      withRedirectUrl: true,
+    })
   })
 
   try {
@@ -23,7 +28,19 @@ onMounted(async () => {
 </script>
 
 <template>
-  <lukso-button variant="secondary" is-full-width is-link :href="deepLink">
+  <lukso-button
+    variant="secondary"
+    is-full-width
+    target="_self"
+    :is-loading="!deepLink || isLoading ? true : undefined"
+    :loading-text="
+      formatMessage(
+        'modal_connect_wallet_select_provider_connect_mobile_button'
+      )
+    "
+    :disabled="!deepLink ? true : undefined"
+    @click="handleClick"
+  >
     <lukso-icon name="phone-portrait-outline" class="mr-2"></lukso-icon>
     {{
       formatMessage(
diff --git a/components/WalletConnectQrCode.vue b/components/WalletConnectQrCode.vue
index 742ad499..470ac96f 100644
--- a/components/WalletConnectQrCode.vue
+++ b/components/WalletConnectQrCode.vue
@@ -6,11 +6,8 @@ type Emits = (event: 'disconnect') => void
 const emit = defineEmits<Emits>()
 
 const qrCodeElement = ref<HTMLDivElement | null>(null)
-const {
-  initProvider,
-  connect: connectWalletConnect,
-  deepLinkParser,
-} = useWalletConnectProvider()
+const { initProvider, connect: connectWalletConnect } =
+  useWalletConnectProvider()
 const isLoading = ref(true)
 const deepLink = ref('')
 const { walletConnectProvider: provider, isMobile } = storeToRefs(useAppStore())
@@ -19,7 +16,7 @@ const { formatMessage } = useIntl()
 const size = computed(() => (isMobile.value ? 300 : 340))
 
 const generateQrCode = (data: string) => {
-  deepLink.value = deepLinkParser(data)
+  deepLink.value = walletConnectDeepLinkUrl(data)
   const qrCode = new QRCodeStyling({
     width: size.value,
     height: size.value,
@@ -43,7 +40,9 @@ const generateQrCode = (data: string) => {
   })
 
   if (qrCodeElement.value) {
+    qrCodeElement.value.innerHTML = '<AppLoader />'
     qrCode.append(qrCodeElement.value as HTMLDivElement)
+    qrCodeElement.value.classList.add('animate-fade-in')
   }
 }
 
@@ -72,6 +71,7 @@ onMounted(async () => {
     >
       <div
         ref="qrCodeElement"
+        class="cursor-pointer"
         :style="{
           'min-height': `${size}px`,
         }"
diff --git a/components/__tests__/AppLinks.spec.ts b/components/__tests__/AppLinks.spec.ts
index f06117e1..bf7df62f 100644
--- a/components/__tests__/AppLinks.spec.ts
+++ b/components/__tests__/AppLinks.spec.ts
@@ -4,10 +4,6 @@ import { describe, expect, it } from 'vitest'
 import AppLinks from '@/components/AppLinks.vue'
 
 describe('AppLinks', () => {
-  const profile: Profile = {
-    address: '0x1234567890abcdef1234567890abcdef12345678',
-  }
-
   it('should render empty links', async () => {
     const component = await renderSuspended(AppLinks, {
       props: {
diff --git a/components/__tests__/AssetStandardBadge.spec.ts b/components/__tests__/AssetStandardBadge.spec.ts
index c2ee18e8..228dcc00 100644
--- a/components/__tests__/AssetStandardBadge.spec.ts
+++ b/components/__tests__/AssetStandardBadge.spec.ts
@@ -1,5 +1,4 @@
 import { renderSuspended } from '@nuxt/test-utils/runtime'
-import { fireEvent, screen } from '@testing-library/vue'
 import { beforeEach, describe, expect, it } from 'vitest'
 
 import AssetStandardBadge from '@/components/AssetStandardBadge.vue'
diff --git a/components/__tests__/FollowCounters.spec.ts b/components/__tests__/FollowCounters.spec.ts
index 7040065e..686376aa 100644
--- a/components/__tests__/FollowCounters.spec.ts
+++ b/components/__tests__/FollowCounters.spec.ts
@@ -1,9 +1,10 @@
 import { renderSuspended } from '@nuxt/test-utils/runtime'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it } from 'vitest'
 
-import type { ProfileFollowers } from '@/types/profile'
 import FollowCounters from '../FollowCounters.vue'
 
+import type { ProfileFollowers } from '@/types/profile'
+
 describe('FollowCounters', () => {
   beforeEach(() => {
     useIntl().setupIntl(defaultConfig)
diff --git a/components/__tests__/LinkButton.spec.ts b/components/__tests__/LinkButton.spec.ts
index 118f244d..991ec11b 100644
--- a/components/__tests__/LinkButton.spec.ts
+++ b/components/__tests__/LinkButton.spec.ts
@@ -4,10 +4,6 @@ import { describe, expect, it } from 'vitest'
 import LinkButton from '@/components/LinkButton.vue'
 
 describe('LinkButton', () => {
-  const profile: Profile = {
-    address: '0x1234567890abcdef1234567890abcdef12345678',
-  }
-
   it('should render empty state', async () => {
     const component = await renderSuspended(LinkButton, {})
 
diff --git a/components/__tests__/ProfileCardShareUniversalPage.spec.ts b/components/__tests__/ProfileCardShareUniversalPage.spec.ts
index a89c54bd..f3b62a24 100644
--- a/components/__tests__/ProfileCardShareUniversalPage.spec.ts
+++ b/components/__tests__/ProfileCardShareUniversalPage.spec.ts
@@ -1,8 +1,13 @@
-import { renderSuspended } from '@nuxt/test-utils/runtime'
+import { mockNuxtImport, renderSuspended } from '@nuxt/test-utils/runtime'
 import { describe, expect, it, vi } from 'vitest'
 
 import ProfileCardShareUniversalPage from '@/components/ProfileCardShareUniversalPage.vue'
 
+const navigateToMock = vi.hoisted(() => vi.fn())
+mockNuxtImport('navigateTo', () => {
+  return navigateToMock
+})
+
 describe('ProfileCardShareUniversalPage', () => {
   const profile: Profile = {
     address: '0x1234567890abcdef1234567890abcdef12345678',
@@ -21,13 +26,16 @@ describe('ProfileCardShareUniversalPage', () => {
       props: { profile },
     })
 
-    const windowOpenSpy = vi.spyOn(window, 'open')
-
     ;(await component.findByRole('img')).click()
 
-    expect(windowOpenSpy).toHaveBeenCalledWith(
+    expect(navigateToMock).toHaveBeenCalledWith(
       'https://universal.page/profiles/lukso/0x1234567890abcdef1234567890abcdef12345678',
-      '_blank'
+      {
+        external: true,
+        open: {
+          target: '_blank',
+        },
+      }
     )
   })
 })
diff --git a/components/__tests__/ProfileCardShareUniversalSwaps.spec.ts b/components/__tests__/ProfileCardShareUniversalSwaps.spec.ts
index 638beb99..367d9930 100644
--- a/components/__tests__/ProfileCardShareUniversalSwaps.spec.ts
+++ b/components/__tests__/ProfileCardShareUniversalSwaps.spec.ts
@@ -1,8 +1,13 @@
-import { renderSuspended } from '@nuxt/test-utils/runtime'
+import { mockNuxtImport, renderSuspended } from '@nuxt/test-utils/runtime'
 import { describe, expect, it, vi } from 'vitest'
 
 import ProfileCardShareUniversalSwaps from '@/components/ProfileCardShareUniversalSwaps.vue'
 
+const navigateToMock = vi.hoisted(() => vi.fn())
+mockNuxtImport('navigateTo', () => {
+  return navigateToMock
+})
+
 describe('ProfileCardShareUniversalSwaps', () => {
   const profile: Profile = {
     address: '0x1234567890abcdef1234567890abcdef12345678',
@@ -21,13 +26,16 @@ describe('ProfileCardShareUniversalSwaps', () => {
       props: { profile },
     })
 
-    const windowOpenSpy = vi.spyOn(window, 'open')
-
     ;(await component.findByRole('img')).click()
 
-    expect(windowOpenSpy).toHaveBeenCalledWith(
+    expect(navigateToMock).toHaveBeenCalledWith(
       'https://universalswaps.io/social/0x1234567890abcdef1234567890abcdef12345678',
-      '_blank'
+      {
+        external: true,
+        open: {
+          target: '_blank',
+        },
+      }
     )
   })
 })
diff --git a/components/__tests__/__snapshots__/ProfileCard.spec.ts.snap b/components/__tests__/__snapshots__/ProfileCard.spec.ts.snap
index f4920e62..e0577c60 100644
--- a/components/__tests__/__snapshots__/ProfileCard.spec.ts.snap
+++ b/components/__tests__/__snapshots__/ProfileCard.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`ProfileCard > should render empty profile 1`] = `
 "<div id="test-wrapper">
   <div class="relative">
-    <lukso-card variant="dapp" is-full-width="" shadow="small" border-radius="medium" class="-mx-4 -mt-6 w-screen sm:mx-0 sm:mt-0 sm:w-full">
+    <lukso-card variant="dapp" is-full-width="" shadow="small" border-radius="small" class="-mx-4 -mt-6 w-screen sm:mx-0 sm:mt-0 sm:w-full">
       <div slot="header" class="relative flex size-full flex-col items-center">
         <div class="absolute right-4 top-4 flex flex-col items-end gap-2">
           <div>
@@ -29,7 +29,7 @@ exports[`ProfileCard > should render empty profile 1`] = `
       <div slot="content" class="relative flex flex-col p-4 pb-6 sm:p-8">
         <!-- Profile picture -->
         <div class="absolute top-[-60px]">
-          <lukso-profile profile-address="" size="2x-large" has-identicon="" class="relative z-[1] cursor-pointer rounded-full outline outline-4 outline-neutral-100 transition hover:scale-[1.02]"></lukso-profile>
+          <lukso-profile profile-address="" size="2x-large" has-identicon="" class="relative z-[1] flex cursor-pointer rounded-full outline outline-4 outline-neutral-100 transition hover:scale-[1.02]"></lukso-profile>
         </div>
         <div class="flex min-h-7 justify-end">
           <!-- Follow Button -->
@@ -61,7 +61,7 @@ exports[`ProfileCard > should render empty profile 1`] = `
 exports[`ProfileCard > should render followed by info 1`] = `
 "<div id="test-wrapper">
   <div class="relative">
-    <lukso-card variant="dapp" is-full-width="" shadow="small" border-radius="medium" class="-mx-4 -mt-6 w-screen sm:mx-0 sm:mt-0 sm:w-full">
+    <lukso-card variant="dapp" is-full-width="" shadow="small" border-radius="small" class="-mx-4 -mt-6 w-screen sm:mx-0 sm:mt-0 sm:w-full">
       <div slot="header" class="relative flex size-full flex-col items-center">
         <div class="absolute right-4 top-4 flex flex-col items-end gap-2">
           <div>
@@ -87,16 +87,16 @@ exports[`ProfileCard > should render followed by info 1`] = `
       <div slot="content" class="relative flex flex-col p-4 pb-6 sm:p-8">
         <!-- Profile picture -->
         <div class="absolute top-[-60px]">
-          <lukso-profile profile-address="0x1234567890abcdef1234567890abcdef12345678" size="2x-large" has-identicon="" class="relative z-[1] cursor-pointer rounded-full outline outline-4 outline-neutral-100 transition hover:scale-[1.02]"></lukso-profile>
+          <lukso-profile profile-address="0x1234567890abcdef1234567890abcdef12345678" size="2x-large" has-identicon="" class="relative z-[1] flex cursor-pointer rounded-full outline outline-4 outline-neutral-100 transition hover:scale-[1.02]"></lukso-profile>
         </div>
         <div class="flex min-h-7 justify-end">
           <!-- Follow Button -->
           <div class="group flex">
             <!-- Unfollow -->
-            <lukso-button size="small" variant="secondary" class="hidden group-hover:block" loading-text="Unfollow">
+            <lukso-button size="small" variant="secondary" class="hidden group-hover:block" loading-text="Unfollow" disabled="true">
               <lukso-icon name="profile-remove" size="small" class="mr-2"></lukso-icon><span>Unfollow</span>
             </lukso-button><!-- Following -->
-            <lukso-button size="small" variant="secondary" class="block group-hover:hidden" loading-text="Following">
+            <lukso-button size="small" variant="secondary" class="block group-hover:hidden" loading-text="Following" disabled="true">
               <lukso-icon name="profile" size="small" class="mr-2"></lukso-icon><span>Following</span>
             </lukso-button>
           </div>
@@ -140,7 +140,7 @@ exports[`ProfileCard > should render followed by info 1`] = `
 exports[`ProfileCard > should render profile when connected 1`] = `
 "<div id="test-wrapper">
   <div class="relative">
-    <lukso-card variant="dapp" background-url="https://example.com/background.jpg" is-full-width="" shadow="small" border-radius="medium" class="-mx-4 -mt-6 w-screen sm:mx-0 sm:mt-0 sm:w-full">
+    <lukso-card variant="dapp" background-url="https://example.com/background.jpg" is-full-width="" shadow="small" border-radius="small" class="-mx-4 -mt-6 w-screen sm:mx-0 sm:mt-0 sm:w-full">
       <div slot="header" class="relative flex size-full flex-col items-center">
         <div class="absolute right-4 top-4 flex flex-col items-end gap-2">
           <div>
@@ -166,13 +166,13 @@ exports[`ProfileCard > should render profile when connected 1`] = `
       <div slot="content" class="relative flex flex-col p-4 pb-6 sm:p-8">
         <!-- Profile picture -->
         <div class="absolute top-[-60px]">
-          <lukso-profile profile-url="https://example.com/profile.jpg" profile-address="0x1234567890abcdef1234567890abcdef12345678" size="2x-large" has-identicon="" class="relative z-[1] cursor-pointer rounded-full outline outline-4 outline-neutral-100 transition hover:scale-[1.02]"></lukso-profile>
+          <lukso-profile profile-url="https://example.com/profile.jpg" profile-address="0x1234567890abcdef1234567890abcdef12345678" size="2x-large" has-identicon="" class="relative z-[1] flex cursor-pointer rounded-full outline outline-4 outline-neutral-100 transition hover:scale-[1.02]"></lukso-profile>
         </div>
         <div class="flex min-h-7 justify-end">
           <!-- Follow Button -->
           <div class="group flex">
             <!-- Follow -->
-            <lukso-button size="small" loading-text="Follow">
+            <lukso-button size="small" loading-text="Follow" disabled="true">
               <lukso-icon name="profile-add" size="small" color="neutral-100" class="mr-2"></lukso-icon><span>Follow</span>
             </lukso-button>
           </div>
@@ -219,7 +219,7 @@ exports[`ProfileCard > should render profile when connected 1`] = `
 exports[`ProfileCard > should render profile when not connected 1`] = `
 "<div id="test-wrapper">
   <div class="relative">
-    <lukso-card variant="dapp" background-url="https://example.com/background.jpg" is-full-width="" shadow="small" border-radius="medium" class="-mx-4 -mt-6 w-screen sm:mx-0 sm:mt-0 sm:w-full">
+    <lukso-card variant="dapp" background-url="https://example.com/background.jpg" is-full-width="" shadow="small" border-radius="small" class="-mx-4 -mt-6 w-screen sm:mx-0 sm:mt-0 sm:w-full">
       <div slot="header" class="relative flex size-full flex-col items-center">
         <div class="absolute right-4 top-4 flex flex-col items-end gap-2">
           <div>
@@ -245,13 +245,13 @@ exports[`ProfileCard > should render profile when not connected 1`] = `
       <div slot="content" class="relative flex flex-col p-4 pb-6 sm:p-8">
         <!-- Profile picture -->
         <div class="absolute top-[-60px]">
-          <lukso-profile profile-url="https://example.com/profile.jpg" profile-address="0x1234567890abcdef1234567890abcdef12345678" size="2x-large" has-identicon="" class="relative z-[1] cursor-pointer rounded-full outline outline-4 outline-neutral-100 transition hover:scale-[1.02]"></lukso-profile>
+          <lukso-profile profile-url="https://example.com/profile.jpg" profile-address="0x1234567890abcdef1234567890abcdef12345678" size="2x-large" has-identicon="" class="relative z-[1] flex cursor-pointer rounded-full outline outline-4 outline-neutral-100 transition hover:scale-[1.02]"></lukso-profile>
         </div>
         <div class="flex min-h-7 justify-end">
           <!-- Follow Button -->
           <div class="group flex">
             <!-- Follow -->
-            <lukso-button size="small" loading-text="Follow">
+            <lukso-button size="small" loading-text="Follow" disabled="true">
               <lukso-icon name="profile-add" size="small" color="neutral-100" class="mr-2"></lukso-icon><span>Follow</span>
             </lukso-button>
           </div>
@@ -298,7 +298,7 @@ exports[`ProfileCard > should render profile when not connected 1`] = `
 exports[`ProfileCard > should render unfollow button 1`] = `
 "<div id="test-wrapper">
   <div class="relative">
-    <lukso-card variant="dapp" is-full-width="" shadow="small" border-radius="medium" class="-mx-4 -mt-6 w-screen sm:mx-0 sm:mt-0 sm:w-full">
+    <lukso-card variant="dapp" is-full-width="" shadow="small" border-radius="small" class="-mx-4 -mt-6 w-screen sm:mx-0 sm:mt-0 sm:w-full">
       <div slot="header" class="relative flex size-full flex-col items-center">
         <div class="absolute right-4 top-4 flex flex-col items-end gap-2">
           <div>
@@ -324,16 +324,16 @@ exports[`ProfileCard > should render unfollow button 1`] = `
       <div slot="content" class="relative flex flex-col p-4 pb-6 sm:p-8">
         <!-- Profile picture -->
         <div class="absolute top-[-60px]">
-          <lukso-profile profile-address="0x1234567890abcdef1234567890abcdef12345678" size="2x-large" has-identicon="" class="relative z-[1] cursor-pointer rounded-full outline outline-4 outline-neutral-100 transition hover:scale-[1.02]"></lukso-profile>
+          <lukso-profile profile-address="0x1234567890abcdef1234567890abcdef12345678" size="2x-large" has-identicon="" class="relative z-[1] flex cursor-pointer rounded-full outline outline-4 outline-neutral-100 transition hover:scale-[1.02]"></lukso-profile>
         </div>
         <div class="flex min-h-7 justify-end">
           <!-- Follow Button -->
           <div class="group flex">
             <!-- Unfollow -->
-            <lukso-button size="small" variant="secondary" class="hidden group-hover:block" loading-text="Unfollow">
+            <lukso-button size="small" variant="secondary" class="hidden group-hover:block" loading-text="Unfollow" disabled="true">
               <lukso-icon name="profile-remove" size="small" class="mr-2"></lukso-icon><span>Unfollow</span>
             </lukso-button><!-- Following -->
-            <lukso-button size="small" variant="secondary" class="block group-hover:hidden" loading-text="Following">
+            <lukso-button size="small" variant="secondary" class="block group-hover:hidden" loading-text="Following" disabled="true">
               <lukso-icon name="profile" size="small" class="mr-2"></lukso-icon><span>Following</span>
             </lukso-button>
           </div>
diff --git a/components/__tests__/__snapshots__/ProfileTabs.spec.ts.snap b/components/__tests__/__snapshots__/ProfileTabs.spec.ts.snap
index 8fcd2c38..dba6fced 100644
--- a/components/__tests__/__snapshots__/ProfileTabs.spec.ts.snap
+++ b/components/__tests__/__snapshots__/ProfileTabs.spec.ts.snap
@@ -2,22 +2,26 @@
 
 exports[`ProfileTabs > renders active state 1`] = `
 "<div id="test-wrapper">
-  <ul class="mb-4 flex justify-center gap-6 border-b border-b-neutral-90 pb-4 sm:justify-start">
-    <li class="heading-inter-17-semi-bold flex items-center cursor-pointer opacity-50 transition hover:opacity-100">Tokens
-      <!--v-if-->
-    </li>
-    <li class="heading-inter-17-semi-bold flex items-center cursor-default">Collectibles <span class="paragraph-inter-10-semi-bold ml-2 rounded-4 border border-neutral-20 px-1 py-[1px] bg-neutral-20 text-neutral-100">2</span></li>
-  </ul>
+  <div class="mb-4 flex min-h-11 select-none items-center justify-between border-b border-b-neutral-90 pb-4">
+    <ul class="flex justify-center gap-6 sm:justify-start">
+      <li class="heading-inter-17-semi-bold flex items-center cursor-pointer opacity-50 transition hover:opacity-100">Tokens
+        <!--v-if-->
+      </li>
+      <li class="heading-inter-17-semi-bold flex items-center cursor-default">Collectibles <span class="paragraph-inter-10-semi-bold ml-2 rounded-4 border border-neutral-20 px-1 py-px bg-neutral-20 text-neutral-100">2</span></li>
+    </ul>
+  </div>
 </div>"
 `;
 
 exports[`ProfileTabs > renders default state 1`] = `
 "<div id="test-wrapper">
-  <ul class="mb-4 flex justify-center gap-6 border-b border-b-neutral-90 pb-4 sm:justify-start">
-    <li class="heading-inter-17-semi-bold flex items-center cursor-pointer opacity-50 transition hover:opacity-100">Tokens
-      <!--v-if-->
-    </li>
-    <li class="heading-inter-17-semi-bold flex items-center cursor-pointer opacity-50 transition hover:opacity-100">Collectibles <span class="paragraph-inter-10-semi-bold ml-2 rounded-4 border border-neutral-20 px-1 py-[1px] bg-transparent text-neutral-20">2</span></li>
-  </ul>
+  <div class="mb-4 flex min-h-11 select-none items-center justify-between border-b border-b-neutral-90 pb-4">
+    <ul class="flex justify-center gap-6 sm:justify-start">
+      <li class="heading-inter-17-semi-bold flex items-center cursor-pointer opacity-50 transition hover:opacity-100">Tokens
+        <!--v-if-->
+      </li>
+      <li class="heading-inter-17-semi-bold flex items-center cursor-pointer opacity-50 transition hover:opacity-100">Collectibles <span class="paragraph-inter-10-semi-bold ml-2 rounded-4 border border-neutral-20 px-1 py-px bg-transparent text-neutral-20">2</span></li>
+    </ul>
+  </div>
 </div>"
 `;
diff --git a/components/__tests__/__snapshots__/ProfileTabsItem.spec.ts.snap b/components/__tests__/__snapshots__/ProfileTabsItem.spec.ts.snap
index f83d7e0c..f0e825cb 100644
--- a/components/__tests__/__snapshots__/ProfileTabsItem.spec.ts.snap
+++ b/components/__tests__/__snapshots__/ProfileTabsItem.spec.ts.snap
@@ -10,7 +10,7 @@ exports[`ProfileTabsItem > renders active state 1`] = `
 
 exports[`ProfileTabsItem > renders count 1`] = `
 "<div id="test-wrapper">
-  <li class="heading-inter-17-semi-bold flex items-center cursor-pointer opacity-50 transition hover:opacity-100">Test Label <span class="paragraph-inter-10-semi-bold ml-2 rounded-4 border border-neutral-20 px-1 py-[1px] bg-transparent text-neutral-20">2</span></li>
+  <li class="heading-inter-17-semi-bold flex items-center cursor-pointer opacity-50 transition hover:opacity-100">Test Label <span class="paragraph-inter-10-semi-bold ml-2 rounded-4 border border-neutral-20 px-1 py-px bg-transparent text-neutral-20">2</span></li>
 </div>"
 `;
 
diff --git a/composables/useBrowser.ts b/composables/useBrowser.ts
new file mode 100644
index 00000000..671f6581
--- /dev/null
+++ b/composables/useBrowser.ts
@@ -0,0 +1,16 @@
+export const useBrowser = () => {
+  const extensionStore = computed(() => {
+    const url = browserInfo().storeLink
+    const icon = `logo-${browserInfo().id}`
+
+    return {
+      icon,
+      url,
+    }
+  })
+
+  return {
+    browserSupportExtension: computed(() => extensionStore.value.url !== ''),
+    extensionStore,
+  }
+}
diff --git a/composables/useFilters.ts b/composables/useFilters.ts
index fdf60d6f..60bdfe6a 100644
--- a/composables/useFilters.ts
+++ b/composables/useFilters.ts
@@ -6,7 +6,7 @@ import type {
 
 const FILTER_DEFAULTS: Filters = {
   assetType: 'owned',
-  assetGroup: 'collectibles',
+  assetGroup: 'grid',
   orderBy: 'name-asc',
   search: undefined,
   collections: undefined,
diff --git a/composables/useModal.ts b/composables/useModal.ts
index 66f93b39..6a775fad 100644
--- a/composables/useModal.ts
+++ b/composables/useModal.ts
@@ -5,11 +5,11 @@ import type { Modal } from '@/types/modal'
  *
  * @param data
  */
-const showModal = async (modal: Modal) => {
+const showModal = async <T = ModalData>(modal: Modal<T>) => {
   const route = useRoute()
   const { isModalOpen } = storeToRefs(useAppStore())
 
-  if (isModalOpen.value) {
+  if (isModalOpen.value && !modal.forceOpen) {
     return
   }
 
@@ -49,12 +49,12 @@ const closeModal = async () => {
   })
 }
 
-export const useModal = () => {
+export const useModal = <T = ModalData>() => {
   const { modal } = useAppStore()
 
   return {
     showModal,
     closeModal,
-    modal,
+    modal: modal as Modal<T>,
   }
 }
diff --git a/composables/useProfile.ts b/composables/useProfile.ts
index 87e4c907..d4f0eae0 100644
--- a/composables/useProfile.ts
+++ b/composables/useProfile.ts
@@ -28,22 +28,10 @@ const viewedProfile = () => {
   return getProfile(viewedProfileAddress)
 }
 
-const viewedProfileIsConnected = (viewedProfileAddress?: Address) => {
-  const { connectedProfileAddress, isConnected } = storeToRefs(useAppStore())
-
-  return (
-    isConnected.value &&
-    // we need to compare lowercase addresses in case of checksummed addresses
-    connectedProfileAddress.value?.toLowerCase() ===
-      viewedProfileAddress?.toLowerCase()
-  )
-}
-
 export function useProfile() {
   return {
     getProfile,
     connectedProfile,
     viewedProfile,
-    viewedProfileIsConnected,
   }
 }
diff --git a/composables/useProfileAssets.ts b/composables/useProfileAssets.ts
index 228589aa..17e81cfd 100644
--- a/composables/useProfileAssets.ts
+++ b/composables/useProfileAssets.ts
@@ -6,6 +6,6 @@ export function useProfileAssets() {
       return useProfileAssetsRpc()(profileAddress)
     }
 
-    return useProfileAssetsGraph()({ profileAddress })
+    return useProfileAssetsGraph()(profileAddress)
   }
 }
diff --git a/composables/useWeb3.ts b/composables/useWeb3.ts
index 04159784..8c71ab0e 100644
--- a/composables/useWeb3.ts
+++ b/composables/useWeb3.ts
@@ -9,7 +9,7 @@ export default function useWeb3(providerName: string) {
     const web3 = web3Store.getWeb3(providerName)
 
     if (!web3) {
-      throw new Error('Web3 instance not found')
+      throw new Error(`Web3 instance not found for provider: ${providerName}`)
     }
 
     return web3
diff --git a/composables/web3-provider/useBaseProvider.ts b/composables/web3-provider/useBaseProvider.ts
index 4878c3f5..5dde7a43 100644
--- a/composables/web3-provider/useBaseProvider.ts
+++ b/composables/web3-provider/useBaseProvider.ts
@@ -1,11 +1,22 @@
 import { INJECTED_PROVIDER } from '@/shared/provider'
 
 const connect = async () => {
-  const { isWalletConnect, isMobile } = storeToRefs(useAppStore())
-  const { connect: connectWalletConnect } = useWalletConnectProvider()
+  const { isWalletConnect, isMobile, walletConnectProvider } =
+    storeToRefs(useAppStore())
+  const {
+    connect: connectWalletConnect,
+    initProvider: initWalletConnectProvider,
+  } = useWalletConnectProvider()
   const { connect: connectBrowserExtension } = useBrowserExtensionProvider()
 
   if (isWalletConnect.value || isMobile.value) {
+    await initWalletConnectProvider()
+    walletConnectProvider.value?.on('display_uri', (data: string) => {
+      const deepLink = walletConnectDeepLinkUrl(data, {
+        withRedirectUrl: true,
+      })
+      navigateTo(deepLink, { external: true })
+    })
     await connectWalletConnect()
     return
   }
@@ -15,17 +26,26 @@ const connect = async () => {
 
 const disconnect = () => {
   const { removeItem } = useLocalStorage()
-  const { connectedProfileAddress, isWalletConnect, walletConnectProvider } =
-    storeToRefs(useAppStore())
+  const {
+    connectedProfileAddress,
+    isWalletConnect,
+    walletConnectProvider,
+    walletConnectSession,
+  } = storeToRefs(useAppStore())
+  const { isEditingGrid } = storeToRefs(useGridStore())
 
   // disconnect WalletConnect
   if (isWalletConnect.value) {
     walletConnectProvider.value?.disconnect()
-    isWalletConnect.value = false
+    walletConnectSession.value = undefined
   }
 
+  // reset connected profile address
   connectedProfileAddress.value = undefined
+  // remove connection expiry
   removeItem(STORAGE_KEY.CONNECTION_EXPIRY)
+  // exit edit mode for grid
+  isEditingGrid.value = false
 }
 
 /**
diff --git a/composables/web3-provider/useBrowserExtensionProvider.ts b/composables/web3-provider/useBrowserExtensionProvider.ts
index e1f1b484..77ffef42 100644
--- a/composables/web3-provider/useBrowserExtensionProvider.ts
+++ b/composables/web3-provider/useBrowserExtensionProvider.ts
@@ -5,7 +5,12 @@ import type { ProviderAPI } from '@/types/provider'
 const openStoreLink = () => {
   const storeLink = browserInfo().storeLink
 
-  window.open(storeLink, '_blank')
+  navigateTo(storeLink, {
+    external: true,
+    open: {
+      target: '_blank',
+    },
+  })
 }
 
 const connect = async () => {
@@ -47,7 +52,7 @@ const connect = async () => {
 
     // when we connect on the landing page we redirect to profile
     if (route.name === 'index') {
-      navigateTo(profileRoute(address))
+      await navigateTo(profileRoute(address))
     }
   } catch (error: unknown) {
     console.error(error)
diff --git a/composables/web3-provider/useWalletConnectProvider.ts b/composables/web3-provider/useWalletConnectProvider.ts
index 19bc65a9..d072111a 100644
--- a/composables/web3-provider/useWalletConnectProvider.ts
+++ b/composables/web3-provider/useWalletConnectProvider.ts
@@ -3,7 +3,10 @@ import { EthereumProvider as WalletConnectProvider } from '@walletconnect/ethere
 import type EthereumProvider from '@walletconnect/ethereum-provider'
 
 const initProvider = async () => {
-  const { walletConnectProvider: provider } = storeToRefs(useAppStore())
+  const { walletConnectProvider: provider, selectedChainId: chainId } =
+    storeToRefs(useAppStore())
+  const numberChainId = hexToNumber(chainId.value) as number
+  const rpcNode = (await selectRpcNode())?.host as string
 
   provider.value = await WalletConnectProvider.init({
     projectId: '68cee9cbecf1293488f207237e89f337',
@@ -11,52 +14,62 @@ const initProvider = async () => {
       name: 'Universal Profiles',
       description:
         'Explore Universal Profiles and view all your assets in one place as well as send and receive tokens to other Universal Profile users.',
-      url: 'https://universalprofile.cloud/',
+      url: BASE_DAPP_URL,
       icons: ['https://universalprofile.cloud/favicon.png'],
     },
     showQrModal: false,
-    optionalChains: [42, 4201],
+    optionalChains: [numberChainId],
     rpcMap: {
-      42: 'https://rpc1.mainnet.lukso.dev',
-      4201: 'https://rpc.testnet.lukso.network',
+      [numberChainId]: rpcNode,
     },
   })
 }
 
-const connect = async (requestAccounts = true) => {
+const connect = async () => {
   const {
     walletConnectProvider: provider,
     connectedProfileAddress,
+    walletConnectSession,
     isWalletConnect,
-    isConnecting,
   } = storeToRefs(useAppStore())
   const { setConnectionExpiry } = useConnectionExpiry()
   const { addWeb3 } = useWeb3Store()
   const { disconnect } = useBaseProvider()
-  const { showModal } = useModal()
+  const { showModal, modal, closeModal } = useModal()
   const { formatMessage } = useIntl()
+  const route = useRoute()
 
   try {
-    isConnecting.value = true
-    await provider.value?.connect()
-
-    if (requestAccounts) {
-      const result = (await provider.value?.request({
-        method: 'eth_requestAccounts',
-      })) as Address[]
+    if (isWalletConnect.value) {
+      await provider.value?.enable()
+    } else {
+      await provider.value?.connect()
+    }
 
-      if (!result) {
-        throw new NoAccountsError()
-      }
+    walletConnectSession.value = provider.value?.session
+    const result = (await provider.value?.request({
+      method: 'eth_requestAccounts',
+    })) as Address[]
 
-      const [address] = result
-      connectedProfileAddress.value = address
+    if (!result) {
+      throw new NoAccountsError()
     }
 
+    const [address] = result
+    connectedProfileAddress.value = address
     setConnectionExpiry()
-    navigateTo(profileRoute(connectedProfileAddress.value))
-    isWalletConnect.value = true
 
+    // close connect modal if it's open
+    if (modal?.template === 'ConnectWallet') {
+      closeModal()
+    }
+
+    // when we connect on the landing page we redirect to profile
+    if (route.name === 'index') {
+      navigateTo(profileRoute(address))
+    }
+
+    // set web3 for wallet connect
     if (provider.value) {
       addWeb3(PROVIDERS.WALLET_CONNECT, provider.value as EthereumProvider)
     }
@@ -69,36 +82,12 @@ const connect = async (requestAccounts = true) => {
         message: getErrorMessage(error),
       },
     })
-  } finally {
-    isConnecting.value = false
   }
 }
 
-/**
- * Reconnect WalletConnect but don't trigger request accounts
- */
-const reconnect = async () => {
-  connect(false)
-}
-
-/**
- * Parse deep link to be used by mobile app
- *
- * By default WalletConnect uses wc: prefix for deep linking, but this also works with
- * other wallets. We replace with own prefix to ensure it works with our app.
- *
- * @param data
- * @returns
- */
-const deepLinkParser = (data: string) => {
-  return data.replace('wc:', 'network.lukso.universalprofiles.ios:')
-}
-
 export const useWalletConnectProvider = () => {
   return {
     initProvider,
     connect,
-    reconnect,
-    deepLinkParser,
   }
 }
diff --git a/domains/graph/components/NftListCardGraph.vue b/domains/graph/components/NftListCardGraph.vue
index c84078e7..bb746e3d 100644
--- a/domains/graph/components/NftListCardGraph.vue
+++ b/domains/graph/components/NftListCardGraph.vue
@@ -15,12 +15,7 @@ const asset = computed(() => (targetIsVisible.value ? props.asset : null))
 const assetImage = useAssetImage(asset, false, 260)
 const { showModal } = useModal()
 const { isCreated } = useFilters()
-const viewedProfileAddress = getCurrentProfileAddress()
-const { isMobile } = storeToRefs(useAppStore())
-
-const viewedProfileIsConnected = computed(() =>
-  useProfile().viewedProfileIsConnected(viewedProfileAddress)
-)
+const { isMobile, isViewedProfileConnected } = storeToRefs(useAppStore())
 
 const isStackedCard = computed(
   () => isCollection(props.asset) || (isCreated.value && isLsp8(props.asset))
@@ -74,10 +69,12 @@ const handleBuySellAsset = (event: Event) => {
     return navigateTo(collectionRoute(props.asset.address))
   }
 
-  window.open(
-    universalPageAssetUrl(props.asset.address, props.asset.tokenId),
-    '_blank'
-  )
+  navigateTo(universalPageAssetUrl(props.asset.address, props.asset.tokenId), {
+    external: true,
+    open: {
+      target: '_blank',
+    },
+  })
 }
 
 const assetTokenId = computed(() => {
@@ -159,7 +156,7 @@ onMounted(() => {
               {{ $formatNumber(getBalance(asset)) }}
             </span>
           </div>
-          <AppPlaceholderLine v-else class="my-[1px] h-[12px] w-1/4" />
+          <AppPlaceholderLine v-else class="my-px h-[12px] w-1/4" />
           <NftListCardCreatorsGraph :asset="asset" class="mt-4" />
 
           <!-- Buttons -->
@@ -170,13 +167,13 @@ onMounted(() => {
                 variant="secondary"
                 @click="handleBuySellAsset"
               >
-                <span v-if="viewedProfileIsConnected">{{
+                <span v-if="isViewedProfileConnected">{{
                   $formatMessage('button_sell')
                 }}</span>
                 <span v-else>{{ $formatMessage('button_buy') }}</span>
               </lukso-button>
               <lukso-button
-                v-if="!isCollection(asset) && viewedProfileIsConnected"
+                v-if="!isCollection(asset) && isViewedProfileConnected"
                 :size="isMobile ? 'medium' : 'small'"
                 variant="secondary"
                 @click="handleSendAsset"
diff --git a/domains/graph/components/ProfileViewGraph.vue b/domains/graph/components/ProfileViewGraph.vue
deleted file mode 100644
index a9764025..00000000
--- a/domains/graph/components/ProfileViewGraph.vue
+++ /dev/null
@@ -1,167 +0,0 @@
-<script setup lang="ts">
-const { isOwned, setFilters, filters } = useFilters()
-const viewedProfileAddress = getCurrentProfileAddress()
-const viewedProfile = useProfile().getProfile(viewedProfileAddress)
-const assetsData = useProfileAssetsGraph()({
-  profileAddress: viewedProfileAddress,
-})
-const assets = computed(() => assetsData.data.value || [])
-const isLoadingAssets = computed(() => assetsData.isLoading.value)
-
-const filteredAssets = computed(() => {
-  return (
-    assets.value
-      // filter by owned/created
-      .filter(asset => {
-        switch (filters.assetType) {
-          case 'owned':
-            return asset.isOwned && hasBalance(asset) // for owned we need to check if user has balance
-          case 'created':
-            return asset.isIssued
-          default:
-            return false
-        }
-      })
-      // filter token/collectible
-      .filter(asset => {
-        switch (filters.assetGroup) {
-          case 'collectibles':
-            return isCollectible(asset)
-          case 'tokens':
-            return isToken(asset)
-          default:
-            return false
-        }
-      })
-  )
-})
-
-const creationsShowcase = computed(() =>
-  assets.value
-    ?.slice()
-    ?.sort((a, b) => stringSort(a.tokenName, b.tokenName, 'asc'))
-    ?.filter(
-      asset =>
-        asset.isIssued &&
-        isCollectible(asset) &&
-        isCreator(asset, viewedProfileAddress)
-    )
-)
-
-// tokens
-const ownedTokensCount = computed(
-  () =>
-    assets.value.filter(
-      asset => asset.isOwned && isToken(asset) && hasBalance(asset)
-    ).length + (hasBalance(viewedProfile?.value) ? 1 : 0) // +1 if user has LYX token
-)
-
-const createdTokensCount = computed(
-  () => assets.value.filter(asset => asset.isIssued && isToken(asset)).length
-)
-
-// collectibles
-const ownedCollectiblesCount = computed(
-  () =>
-    assets.value.filter(
-      asset => asset.isOwned && isCollectible(asset) && hasBalance(asset)
-    ).length
-)
-
-const createdCollectiblesCount = computed(
-  () =>
-    assets.value.filter(
-      asset =>
-        asset.isIssued &&
-        isCollectible(asset) &&
-        isCreator(asset, viewedProfileAddress)
-    ).length
-)
-
-const handleTabChange = (tab: ProfileViewTabName) => {
-  setFilters({ assetGroup: tab }, undefined, true)
-}
-
-const tabs = computed(() => {
-  return [
-    {
-      id: 'collectibles',
-      count: isOwned.value
-        ? ownedCollectiblesCount.value
-        : createdCollectiblesCount.value,
-    },
-    {
-      id: 'tokens',
-      count: isOwned.value ? ownedTokensCount.value : createdTokensCount.value,
-    },
-  ]
-})
-
-const selectTabBasedOnAssetCounts = () => {
-  // when user has no collectibles, we show tokens first
-  const assetGroup =
-    ownedCollectiblesCount.value > 0 || createdCollectiblesCount.value
-      ? 'collectibles'
-      : 'tokens'
-  setFilters({
-    assetGroup,
-  })
-}
-
-watch(
-  () => ownedCollectiblesCount.value,
-  async () => {
-    await nextTick()
-    selectTabBasedOnAssetCounts()
-  }
-)
-
-watch(
-  () => createdCollectiblesCount.value,
-  async () => {
-    await nextTick()
-    selectTabBasedOnAssetCounts()
-  }
-)
-
-onMounted(async () => {
-  await nextTick()
-  selectTabBasedOnAssetCounts()
-})
-</script>
-
-<template>
-  <AppPageLoader :is-loading="viewedProfile?.isLoading">
-    <div
-      v-if="viewedProfile?.standard === STANDARDS.LSP3"
-      class="mx-auto max-w-content"
-    >
-      <ProfileCard />
-      <div
-        v-if="createdCollectiblesCount > 0"
-        class="heading-inter-17-semi-bold my-10 flex items-center justify-center sm:mt-20"
-      >
-        {{ $formatMessage('asset_creations') }}
-        <span
-          class="paragraph-inter-10-semi-bold ml-2 rounded-4 border border-neutral-20 bg-neutral-20 px-1 py-[1px] text-neutral-100"
-          >{{ createdCollectiblesCount }}</span
-        >
-      </div>
-      <CreationsCarousel
-        v-if="createdCollectiblesCount > 0"
-        :assets="creationsShowcase"
-        class="mb-10"
-      />
-      <div>
-        <ProfileTabs
-          :active-tab="filters.assetGroup"
-          :tabs="tabs"
-          @activate-tab="handleTabChange"
-          class="mt-20"
-        />
-        <ProfileAssets :assets="filteredAssets" :is-loading="isLoadingAssets" />
-      </div>
-    </div>
-    <ProfileViewNotUp v-else :address="viewedProfile?.address" />
-  </AppPageLoader>
-</template>
diff --git a/domains/graph/components/TokenListCardGraph.vue b/domains/graph/components/TokenListCardGraph.vue
index 074a3baa..c6d05609 100644
--- a/domains/graph/components/TokenListCardGraph.vue
+++ b/domains/graph/components/TokenListCardGraph.vue
@@ -12,12 +12,7 @@ const targetIsVisible = ref(false)
 const target = ref<HTMLElement | null>(null)
 const asset = computed(() => (targetIsVisible.value ? props.asset : null))
 const assetImage = useAssetImage(asset, true, 260)
-const viewedProfileAddress = getCurrentProfileAddress()
-const { isMobile } = storeToRefs(useAppStore())
-
-const viewedProfileIsConnected = computed(() =>
-  useProfile().viewedProfileIsConnected(viewedProfileAddress)
-)
+const { isMobile, isViewedProfileConnected } = storeToRefs(useAppStore())
 
 const handleShowAsset = () => {
   navigateTo(assetRoute(props.asset.address))
@@ -35,7 +30,12 @@ const handleSendAsset = (event: Event) => {
 
 const handleBuySellAsset = (event: Event) => {
   event.stopPropagation()
-  window.open(universalSwapsAssetUrl(props.asset.address), '_blank')
+  navigateTo(universalSwapsAssetUrl(props.asset.address), {
+    external: true,
+    open: {
+      target: '_blank',
+    },
+  })
 }
 
 const isLoadedAsset = computed(() => asset.value && !asset.value.isLoading)
@@ -146,7 +146,7 @@ onMounted(() => {
                   >{{ $formatMessage('button_buy_sell') }}</lukso-button
                 >
                 <lukso-button
-                  v-if="viewedProfileIsConnected"
+                  v-if="isViewedProfileConnected"
                   :size="isMobile ? 'medium' : 'small'"
                   variant="secondary"
                   @click="handleSendAsset"
diff --git a/domains/graph/components/__tests__/AppNavbarProfileSearchGraph.spec.ts b/domains/graph/components/__tests__/AppNavbarProfileSearchGraph.spec.ts
index ad444424..90c6a9b7 100644
--- a/domains/graph/components/__tests__/AppNavbarProfileSearchGraph.spec.ts
+++ b/domains/graph/components/__tests__/AppNavbarProfileSearchGraph.spec.ts
@@ -1,5 +1,4 @@
 import { renderSuspended } from '@nuxt/test-utils/runtime'
-import { fireEvent, screen } from '@testing-library/vue'
 import { beforeEach, describe, expect, it } from 'vitest'
 
 import AppNavbarProfileSearchGraph from '../AppNavbarProfileSearchGraph.vue'
diff --git a/domains/graph/composables/useProfileAssetsGraph.ts b/domains/graph/composables/useProfileAssetsGraph.ts
index 703a4fef..535828af 100644
--- a/domains/graph/composables/useProfileAssetsGraph.ts
+++ b/domains/graph/composables/useProfileAssetsGraph.ts
@@ -1,37 +1,61 @@
-import { useQuery } from '@tanstack/vue-query'
+import { useQueries } from '@tanstack/vue-query'
 
 import type { ProfileAssetsQuery } from '@/.nuxt/gql/default'
-
-type FiltersProfileAssets = {
-  profileAddress?: MaybeRef<Address | null>
-}
+import type { QFQueryOptions } from '@/utils/queryFunctions'
 
 type QueryResult = ProfileAssetsQuery
 
 export function useProfileAssetsGraph() {
-  return ({ profileAddress: _profileAddress }: FiltersProfileAssets) => {
+  return (_profileAddress?: MaybeRef<Address | null>) => {
     const { selectedChainId: chainId } = useAppStore()
     const profileAddress = unref(_profileAddress)
 
-    return useQuery({
-      queryKey: ['profile-assets-graph', profileAddress, chainId],
-      queryFn: async () => {
+    const queries = computed(() => {
+      const queries: Array<QFQueryOptions> = [
+        {
+          queryKey: ['profile-assets-graph', profileAddress, chainId],
+          queryFn: async () => {
+            const { receivedAssets, issuedAssets, holds }: QueryResult =
+              await GqlProfileAssets({
+                address: profileAddress,
+              })
+
+            if (graphLog.enabled) {
+              graphLog(
+                'profile-assets-raw',
+                receivedAssets,
+                issuedAssets,
+                holds
+              )
+            }
+
+            return {
+              receivedAssets,
+              issuedAssets,
+              holds,
+            }
+          },
+          refetchInterval: 120_000,
+          staleTime: 250,
+        },
+      ]
+
+      return queries
+    })
+
+    return useQueries({
+      queries,
+      combine: results => {
+        if (!profileAddress) {
+          return null
+        }
+
+        const isLoading = results.some(result => result.isLoading)
         const {
           receivedAssets: receivedAssetsData,
           issuedAssets: issuedAssetsData,
           holds: holdsData,
-        }: QueryResult = await GqlProfileAssets({
-          address: profileAddress,
-        })
-
-        if (graphLog.enabled) {
-          graphLog(
-            'profile-assets-raw',
-            receivedAssetsData,
-            issuedAssetsData,
-            holdsData
-          )
-        }
+        } = (results[0]?.data as QueryResult) || {}
 
         const receivedAssets =
           receivedAssetsData?.flatMap(receivedAsset => {
@@ -49,6 +73,7 @@ export function useProfileAssetsGraph() {
                     ),
                     isOwned: true,
                     isIssued: false,
+                    isLoading,
                   })
                 }
               })
@@ -67,6 +92,7 @@ export function useProfileAssetsGraph() {
               ),
               isOwned: true,
               isIssued: false,
+              isLoading,
             }
           }) || []
 
@@ -90,8 +116,6 @@ export function useProfileAssetsGraph() {
 
         return [...receivedAssets, ...issuedAssets]
       },
-      refetchInterval: 120_000,
-      staleTime: 250,
     })
   }
 }
diff --git a/domains/grid/components/AddWidget.vue b/domains/grid/components/AddWidget.vue
new file mode 100644
index 00000000..b02b4264
--- /dev/null
+++ b/domains/grid/components/AddWidget.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+type Props = {
+  id?: string
+  properties?: GridWidgetProperties
+  width?: number
+  height?: number
+  type?: GridWidgetType
+}
+
+const props = defineProps<Props>()
+const component = shallowRef<Component | undefined>()
+
+const WIDGET_COMPONENTS: Record<string, string> = {
+  [GRID_WIDGET_TYPE.enum.TEXT]: 'Text',
+  [GRID_WIDGET_TYPE.enum.IMAGES]: 'Images',
+  [GRID_WIDGET_TYPE.enum.IFRAME]: 'Basic',
+  [GRID_WIDGET_TYPE.enum.X]: 'Basic',
+  [GRID_WIDGET_TYPE.enum.INSTAGRAM]: 'Basic',
+  [GRID_WIDGET_TYPE.enum.SPOTIFY]: 'Basic',
+  [GRID_WIDGET_TYPE.enum.SOUNDCLOUD]: 'Basic',
+  [GRID_WIDGET_TYPE.enum.WARPCAST]: 'Basic',
+  [GRID_WIDGET_TYPE.enum.YOUTUBE]: 'Basic',
+  [GRID_WIDGET_TYPE.enum.ELFSIGHT]: 'Elfsight',
+}
+
+const loadComponent = (type?: string): Component | undefined => {
+  if (type && WIDGET_COMPONENTS[type]) {
+    return defineAsyncComponent(
+      () => import(`./AddWidget${WIDGET_COMPONENTS[type]}.vue`)
+    )
+  }
+
+  // when no type we display selection screen
+  return defineAsyncComponent(() => import('./AddWidgetSelection.vue'))
+}
+
+watch(
+  () => props.type,
+  () => {
+    component.value = loadComponent(props.type)
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <component
+    v-if="component"
+    :is="component"
+    :type="type"
+    :properties="properties"
+    :id="id"
+    :width="width"
+    :height="height"
+  ></component>
+</template>
diff --git a/domains/grid/components/AddWidgetBasic.vue b/domains/grid/components/AddWidgetBasic.vue
new file mode 100644
index 00000000..95ae7d49
--- /dev/null
+++ b/domains/grid/components/AddWidgetBasic.vue
@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import { detectSocialMedia } from '@lukso/web-components/tools'
+import { computedAsync } from '@vueuse/core'
+
+type Props = {
+  type: GridWidgetType
+  id?: string
+  properties?: GridWidgetProperties
+  width?: number
+  height?: number
+}
+
+const props = defineProps<Props>()
+const { formatMessage } = useIntl()
+const { closeModal, showModal } = useModal()
+const { addGridWidget, updateGridWidget, getGridById } = useGrid()
+const { tempGrid, selectedGridId } = storeToRefs(useGridStore())
+const isEdit = computed(() => !!props.id)
+
+const getSrc = async () => {
+  // in edit we read src from properties
+  if (isEdit.value) {
+    const parse = await WIDGET_SCHEMA_MAP[props.type]?.build?.safeParseAsync(
+      props.properties
+    )
+    return parse?.data?.src
+  }
+}
+
+const getType = async () => {
+  // in edit mode we want to detect if the iframe is not a supported platform
+  if (isEdit.value && props.type === GRID_WIDGET_TYPE.enum.IFRAME) {
+    const platform = detectSocialMedia(await getSrc())
+
+    if (platform) {
+      return platform.toUpperCase() as GridWidgetType
+    }
+  }
+
+  return props.type
+}
+
+const widgetType = computedAsync(async () => {
+  return await getType()
+})
+
+const schemaMap = WIDGET_SCHEMA_MAP[await getType()]
+const {
+  inputValues,
+  canSubmit,
+  getFieldErrorMessage,
+  handleFieldChange,
+  handleFormErrors,
+} = useForm(schemaMap?.input, {
+  input: await getSrc(),
+})
+const isInstructionsVisible = ref(false)
+
+const handleSave = async () => {
+  if (!canSubmit.value) {
+    return
+  }
+
+  try {
+    const inputParse = await schemaMap?.input?.safeParseAsync(inputValues.value)
+    const properties = await schemaMap?.output?.parseAsync(inputParse?.data)
+
+    if (isEdit.value) {
+      updateGridWidget(props.id, {
+        properties,
+        w: props.width,
+        h: props.height,
+      })
+    } else {
+      const newWidget: GridWidgetWithoutCords = createWidgetObject({
+        type: inputParse?.data?.widgetType, // widget type is not based on selection but on the parsing result
+        properties,
+        w: props.width,
+        h: props.height,
+      })
+
+      addGridWidget(
+        newWidget,
+        getGridById(tempGrid.value, selectedGridId.value)
+      )
+    }
+
+    handleCancel()
+  } catch (error: unknown) {
+    handleFormErrors(error)
+  }
+}
+
+const handleCancel = () => {
+  closeModal()
+}
+
+const handleBackToSelection = () => {
+  showModal<Partial<GridWidget>>({
+    template: 'AddGridWidget',
+    forceOpen: true,
+  })
+}
+
+const widgetInstructions = computed(() => {
+  return formatMessage(
+    `add_widget_${widgetType.value.toLowerCase()}_instructions`
+  )
+})
+
+const hasInstructions = computed(() => widgetInstructions.value !== '-')
+</script>
+
+<template>
+  <div class="p-6">
+    <div class="flex items-center gap-3 pb-4">
+      <lukso-icon
+        v-if="!isEdit"
+        name="arrow-left-sm"
+        class="relative z-[1] cursor-pointer rounded-full bg-neutral-100 shadow-neutral-above-shadow transition hover:scale-105 hover:shadow-neutral-above-shadow-1xl active:scale-100 active:shadow-neutral-above-shadow"
+        @click="handleBackToSelection"
+      ></lukso-icon>
+      <div class="heading-inter-21-semi-bold">
+        {{
+          formatMessage(
+            `${isEdit ? 'edit' : 'add'}_widget_${widgetType.toLowerCase()}_title`
+          )
+        }}
+      </div>
+    </div>
+    <div class="paragraph-inter-14-regular pb-6">
+      {{
+        formatMessage(
+          `${isEdit ? 'edit' : 'add'}_widget_${widgetType.toLowerCase()}_description`
+        )
+      }}
+
+      <!-- Instructions -->
+      <div v-if="hasInstructions" class="mt-2">
+        <div class="flex items-center">
+          <span
+            v-if="isInstructionsVisible"
+            class="cursor-pointer text-purple-51 underline hover:text-purple-41"
+            @click="isInstructionsVisible = !isInstructionsVisible"
+            >Hide instructions</span
+          >
+          <span
+            v-else
+            class="cursor-pointer text-purple-51 underline hover:text-purple-41"
+            @click="isInstructionsVisible = !isInstructionsVisible"
+            >Show instructions</span
+          >
+          <lukso-icon
+            name="arrow-down-sm"
+            color="purple-51"
+            :class="{
+              'rotate-180 transition': isInstructionsVisible,
+            }"
+          ></lukso-icon>
+        </div>
+        <div
+          v-if="isInstructionsVisible"
+          class="mt-4 animate-fade-in whitespace-pre-line font-600 break-word"
+        >
+          {{ widgetInstructions }}
+        </div>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <lukso-textarea
+      is-full-width
+      autofocus
+      :placeholder="
+        formatMessage(
+          `add_widget_${widgetType.toLowerCase()}_input_placeholder`
+        )
+      "
+      :value="inputValues.input"
+      :error="getFieldErrorMessage('input')"
+      @on-input="
+        (customEvent: CustomEvent) => handleFieldChange(customEvent, 'input')
+      "
+    ></lukso-textarea>
+
+    <!-- Buttons -->
+    <div class="grid grid-cols-[max-content,auto] pt-6">
+      <lukso-button variant="text" @click="handleCancel">
+        {{ formatMessage('add_widget_cancel') }}
+      </lukso-button>
+      <lukso-button
+        :disabled="!canSubmit ? true : undefined"
+        variant="landing"
+        is-full-width
+        @click="handleSave"
+      >
+        {{ formatMessage('add_widget_confirm') }}
+      </lukso-button>
+    </div>
+  </div>
+</template>
diff --git a/domains/grid/components/AddWidgetElfsight.vue b/domains/grid/components/AddWidgetElfsight.vue
new file mode 100644
index 00000000..71f1a0c6
--- /dev/null
+++ b/domains/grid/components/AddWidgetElfsight.vue
@@ -0,0 +1,172 @@
+<script setup lang="ts">
+type Props = {
+  type: GridWidgetType
+  id?: string
+  properties?: ElfsightWidgetProperties
+  width?: number
+  height?: number
+}
+
+const props = defineProps<Props>()
+const { formatMessage } = useIntl()
+const { closeModal, showModal } = useModal()
+const { addGridWidget, updateGridWidget, getGridById } = useGrid()
+const { tempGrid, selectedGridId } = storeToRefs(useGridStore())
+const isEdit = computed(() => !!props.id)
+const widgetType = computed(() => props.type)
+
+const schemaMap = WIDGET_SCHEMA_MAP[widgetType.value]
+const {
+  inputValues,
+  canSubmit,
+  getFieldErrorMessage,
+  handleFieldChange,
+  handleFormErrors,
+} = useForm(schemaMap?.input, {
+  input: props.properties?.id,
+})
+const isInstructionsVisible = ref(false)
+
+const handleSave = async () => {
+  if (!canSubmit.value) {
+    return
+  }
+
+  try {
+    const inputParse = await schemaMap?.input?.safeParseAsync(inputValues.value)
+    const properties = await schemaMap?.output?.parseAsync(inputParse?.data)
+
+    if (isEdit.value) {
+      updateGridWidget(props.id, {
+        properties,
+        w: props.width,
+        h: props.height,
+      })
+    } else {
+      const newWidget: GridWidgetWithoutCords = createWidgetObject({
+        type: inputParse?.data?.widgetType, // widget type is not based on selection but on the parsing result
+        properties,
+        w: props.width,
+        h: props.height,
+      })
+
+      addGridWidget(
+        newWidget,
+        getGridById(tempGrid.value, selectedGridId.value)
+      )
+    }
+
+    handleCancel()
+  } catch (error: unknown) {
+    handleFormErrors(error)
+  }
+}
+
+const handleCancel = () => {
+  closeModal()
+}
+
+const handleBackToSelection = () => {
+  showModal<Partial<GridWidget>>({
+    template: 'AddGridWidget',
+    forceOpen: true,
+  })
+}
+
+const widgetInstructions = computed(() => {
+  return formatMessage(
+    `add_widget_${widgetType.value.toLowerCase()}_instructions`
+  )
+})
+
+const hasInstructions = computed(() => widgetInstructions.value !== '-')
+</script>
+
+<template>
+  <div class="p-6">
+    <div class="flex items-center gap-3 pb-4">
+      <lukso-icon
+        v-if="!isEdit"
+        name="arrow-left-sm"
+        class="relative z-[1] cursor-pointer rounded-full bg-neutral-100 shadow-neutral-above-shadow transition hover:scale-105 hover:shadow-neutral-above-shadow-1xl active:scale-100 active:shadow-neutral-above-shadow"
+        @click="handleBackToSelection"
+      ></lukso-icon>
+      <div class="heading-inter-21-semi-bold">
+        {{
+          formatMessage(
+            `${isEdit ? 'edit' : 'add'}_widget_${widgetType.toLowerCase()}_title`
+          )
+        }}
+      </div>
+    </div>
+    <div class="paragraph-inter-14-regular pb-6">
+      {{
+        formatMessage(
+          `${isEdit ? 'edit' : 'add'}_widget_${widgetType.toLowerCase()}_description`
+        )
+      }}
+
+      <!-- Instructions -->
+      <div v-if="hasInstructions" class="mt-2">
+        <div class="flex items-center">
+          <span
+            v-if="isInstructionsVisible"
+            class="cursor-pointer text-purple-51 underline hover:text-purple-41"
+            @click="isInstructionsVisible = !isInstructionsVisible"
+            >Hide instructions</span
+          >
+          <span
+            v-else
+            class="cursor-pointer text-purple-51 underline hover:text-purple-41"
+            @click="isInstructionsVisible = !isInstructionsVisible"
+            >Show instructions</span
+          >
+          <lukso-icon
+            name="arrow-down-sm"
+            color="purple-51"
+            :class="{
+              'rotate-180 transition': isInstructionsVisible,
+            }"
+          ></lukso-icon>
+        </div>
+        <div
+          v-if="isInstructionsVisible"
+          class="mt-4 animate-fade-in whitespace-pre-line font-600 break-word"
+        >
+          {{ widgetInstructions }}
+        </div>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <lukso-textarea
+      is-full-width
+      autofocus
+      :placeholder="
+        formatMessage(
+          `add_widget_${widgetType.toLowerCase()}_input_placeholder`
+        )
+      "
+      :value="inputValues.input"
+      :error="getFieldErrorMessage('input')"
+      @on-input="
+        (customEvent: CustomEvent) => handleFieldChange(customEvent, 'input')
+      "
+    ></lukso-textarea>
+
+    <!-- Buttons -->
+    <div class="grid grid-cols-[max-content,auto] pt-6">
+      <lukso-button variant="text" @click="handleCancel">
+        {{ formatMessage('add_widget_cancel') }}
+      </lukso-button>
+      <lukso-button
+        :disabled="!canSubmit ? true : undefined"
+        variant="landing"
+        is-full-width
+        @click="handleSave"
+      >
+        {{ formatMessage('add_widget_confirm') }}
+      </lukso-button>
+    </div>
+  </div>
+</template>
diff --git a/domains/grid/components/AddWidgetImages.vue b/domains/grid/components/AddWidgetImages.vue
new file mode 100644
index 00000000..06ee5521
--- /dev/null
+++ b/domains/grid/components/AddWidgetImages.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+type Props = {
+  type: GridWidgetType
+  id?: string
+  properties?: ImagesWidgetProperties
+  width?: number
+  height?: number
+}
+
+const props = defineProps<Props>()
+const { formatMessage } = useIntl()
+const { closeModal, showModal } = useModal()
+const { addGridWidget, updateGridWidget, getGridById } = useGrid()
+const { tempGrid, selectedGridId } = storeToRefs(useGridStore())
+const schemaMap = WIDGET_SCHEMA_MAP[props.type]
+const isEdit = computed(() => !!props.id)
+const {
+  inputValues,
+  canSubmit,
+  getFieldErrorMessage,
+  handleArrayChange,
+  handleFormErrors,
+} = useForm(
+  schemaMap?.input,
+  (await schemaMap?.build?.safeParseAsync(props.properties || {}))?.data || {
+    images: [''],
+  }
+)
+
+const handleSave = async () => {
+  if (!canSubmit.value) {
+    return
+  }
+
+  try {
+    const properties = await schemaMap?.input?.parseAsync(inputValues.value)
+
+    if (isEdit.value) {
+      updateGridWidget(props.id, {
+        properties,
+        w: props.width,
+        h: props.height,
+      })
+    } else {
+      const newWidget: GridWidgetWithoutCords = createWidgetObject({
+        type: props.type,
+        properties,
+        w: props.width,
+        h: props.height,
+      })
+
+      addGridWidget(
+        newWidget,
+        getGridById(tempGrid.value, selectedGridId.value)
+      )
+    }
+
+    handleCancel()
+  } catch (error: unknown) {
+    handleFormErrors(error)
+  }
+}
+
+const handleCancel = () => {
+  closeModal()
+}
+
+const handleBackToSelection = () => {
+  showModal<Partial<GridWidget>>({
+    template: 'AddGridWidget',
+    forceOpen: true,
+  })
+}
+</script>
+
+<template>
+  <div class="p-6">
+    <div class="flex items-center gap-3 pb-4">
+      <lukso-icon
+        v-if="!isEdit"
+        name="arrow-left-sm"
+        class="relative z-[1] cursor-pointer rounded-full bg-neutral-100 shadow-neutral-above-shadow transition hover:scale-105 hover:shadow-neutral-above-shadow-1xl active:scale-100 active:shadow-neutral-above-shadow"
+        @click="handleBackToSelection"
+      ></lukso-icon>
+      <div class="heading-inter-21-semi-bold">
+        {{
+          formatMessage(
+            `${isEdit ? 'edit' : 'add'}_widget_${type.toLowerCase()}_title`
+          )
+        }}
+      </div>
+    </div>
+    <div class="paragraph-inter-14-regular pb-6">
+      {{
+        formatMessage(
+          `${isEdit ? 'edit' : 'add'}_widget_${type.toLowerCase()}_description`
+        )
+      }}
+    </div>
+
+    <div class="flex flex-col gap-4">
+      <!-- Images -->
+      <lukso-input
+        v-for="(image, index) in inputValues?.images || []"
+        :key="index"
+        .value="image"
+        :placeholder="formatMessage('add_widget_images_placeholder')"
+        :error="getFieldErrorMessage('images', index)"
+        is-full-width
+        @on-input="
+          (customEvent: CustomEvent) =>
+            handleArrayChange(customEvent, 'images', index)
+        "
+      ></lukso-input>
+    </div>
+
+    <!-- Buttons -->
+    <div class="grid grid-cols-[max-content,auto] pt-6">
+      <lukso-button variant="text" @click="handleCancel">
+        {{ formatMessage('add_widget_cancel') }}
+      </lukso-button>
+      <lukso-button
+        :disabled="!canSubmit ? true : undefined"
+        variant="landing"
+        is-full-width
+        @click="handleSave"
+      >
+        {{ formatMessage('add_widget_confirm') }}
+      </lukso-button>
+    </div>
+  </div>
+</template>
diff --git a/domains/grid/components/AddWidgetSelection.vue b/domains/grid/components/AddWidgetSelection.vue
new file mode 100644
index 00000000..da08f342
--- /dev/null
+++ b/domains/grid/components/AddWidgetSelection.vue
@@ -0,0 +1,247 @@
+<script setup lang="ts">
+const { formatMessage } = useIntl()
+const { closeModal, showModal } = useModal()
+
+const SHOW_TOOLTIP_DELAY = 1500
+
+type Props = {
+  type?: GridWidgetType
+  properties?: GridWidgetProperties
+  id?: string
+  width?: number
+  height?: number
+  class?: string
+}
+
+defineProps<Props>()
+
+const handleSelectWidget = (widgetType: GridWidgetType) => {
+  showModal<Partial<GridWidget>>({
+    template: 'AddGridWidget',
+    data: {
+      type: widgetType,
+      w: 1,
+      h: 1,
+    },
+    forceOpen: true,
+  })
+}
+</script>
+
+<template>
+  <div class="border-b border-b-neutral-90">
+    <div class="p-6">
+      <div class="heading-inter-21-semi-bold flex justify-between">
+        {{ formatMessage('add_widget_title') }}
+        <ModalCloseButton @click="closeModal" />
+      </div>
+      <div class="paragraph-inter-14-regular mt-4">
+        {{ formatMessage('add_widget_description') }}
+      </div>
+    </div>
+  </div>
+
+  <div class="max-h-[calc(100vh-250px)] overflow-y-auto">
+    <!-- Website section -->
+    <section
+      class="border-b border-b-neutral-90 px-6 py-4 last-of-type:border-b-0 last-of-type:pb-6"
+    >
+      <div class="paragraph-inter-16-semi-bold mb-4">
+        {{ formatMessage('add_widget_section_website') }}
+      </div>
+      <div class="flex gap-5">
+        <!-- Iframe -->
+        <lukso-tooltip
+          variant="light"
+          :show-delay="SHOW_TOOLTIP_DELAY"
+          :text="formatMessage('widget_type_iframe')"
+        >
+          <div
+            class="flex size-10 cursor-pointer items-center justify-center rounded-full bg-neutral-20 transition hover:scale-105"
+            @click="handleSelectWidget('IFRAME')"
+          >
+            <lukso-icon
+              name="code-outline"
+              size="medium"
+              color="neutral-100"
+            ></lukso-icon>
+          </div>
+        </lukso-tooltip>
+      </div>
+    </section>
+
+    <!-- Custom section -->
+    <section
+      class="border-b border-b-neutral-90 px-6 py-4 last-of-type:border-b-0 last-of-type:pb-6"
+    >
+      <div class="paragraph-inter-16-semi-bold mb-4">
+        {{ formatMessage('add_widget_section_custom') }}
+      </div>
+      <div class="flex gap-5">
+        <!-- Image -->
+        <lukso-tooltip
+          variant="light"
+          :show-delay="SHOW_TOOLTIP_DELAY"
+          :text="formatMessage('widget_type_image')"
+        >
+          <div
+            class="flex size-10 cursor-pointer items-center justify-center rounded-full bg-neutral-20 transition hover:scale-105"
+            @click="handleSelectWidget('IMAGES')"
+          >
+            <lukso-icon
+              name="gallery"
+              size="medium"
+              color="neutral-100"
+            ></lukso-icon>
+          </div>
+        </lukso-tooltip>
+
+        <!-- Text -->
+        <lukso-tooltip
+          variant="light"
+          :show-delay="SHOW_TOOLTIP_DELAY"
+          :text="formatMessage('widget_type_text')"
+        >
+          <div
+            class="flex size-10 cursor-pointer items-center justify-center rounded-full bg-neutral-20 transition hover:scale-105"
+            @click="handleSelectWidget('TEXT')"
+          >
+            <lukso-icon
+              name="document-outline"
+              size="medium"
+              color="neutral-100"
+            ></lukso-icon>
+          </div>
+        </lukso-tooltip>
+
+        <!-- ElfSight -->
+        <lukso-tooltip
+          variant="light"
+          :show-delay="SHOW_TOOLTIP_DELAY"
+          :text="formatMessage('widget_type_elfsight')"
+        >
+          <div
+            class="flex size-10 cursor-pointer items-center justify-center rounded-full bg-neutral-20 transition hover:scale-105"
+            @click="handleSelectWidget('ELFSIGHT')"
+          >
+            <lukso-icon name="logo-elfsight-mono" size="large"></lukso-icon>
+          </div>
+        </lukso-tooltip>
+      </div>
+    </section>
+
+    <!-- Video section -->
+    <section
+      class="border-b border-b-neutral-90 px-6 py-4 last-of-type:border-b-0 last-of-type:pb-6"
+    >
+      <div class="paragraph-inter-16-semi-bold mb-4">
+        {{ formatMessage('add_widget_section_video') }}
+      </div>
+      <div class="flex gap-5">
+        <!-- Youtube -->
+        <lukso-tooltip
+          variant="light"
+          :show-delay="SHOW_TOOLTIP_DELAY"
+          :text="formatMessage('widget_type_youtube')"
+        >
+          <img
+            src="/images/social-media-youtube.svg"
+            :alt="formatMessage('widget_type_youtube')"
+            class="size-10 cursor-pointer transition hover:scale-105"
+            @click="handleSelectWidget('YOUTUBE')"
+          />
+        </lukso-tooltip>
+      </div>
+    </section>
+
+    <!-- Music section -->
+    <section
+      class="border-b border-b-neutral-90 px-6 py-4 last-of-type:border-b-0 last-of-type:pb-6"
+    >
+      <div class="paragraph-inter-16-semi-bold mb-4">
+        {{ formatMessage('add_widget_section_music') }}
+      </div>
+      <div class="flex gap-5">
+        <!-- Spotify -->
+        <lukso-tooltip
+          variant="light"
+          :show-delay="SHOW_TOOLTIP_DELAY"
+          :text="formatMessage('widget_type_spotify')"
+        >
+          <img
+            src="/images/social-media-spotify.svg"
+            :alt="formatMessage('widget_type_spotify')"
+            class="size-10 cursor-pointer transition hover:scale-105"
+            @click="handleSelectWidget('SPOTIFY')"
+          />
+        </lukso-tooltip>
+
+        <!-- Sound Cloud -->
+        <lukso-tooltip
+          variant="light"
+          :show-delay="SHOW_TOOLTIP_DELAY"
+          :text="formatMessage('widget_type_soundcloud')"
+        >
+          <img
+            src="/images/social-media-soundcloud.svg"
+            :alt="formatMessage('widget_type_soundcloud')"
+            class="cursor-pointer transition hover:scale-105"
+            @click="handleSelectWidget('SOUNDCLOUD')"
+          />
+        </lukso-tooltip>
+      </div>
+    </section>
+
+    <!-- Social section -->
+    <section
+      class="border-b border-b-neutral-90 px-6 py-4 last-of-type:border-b-0 last-of-type:pb-6"
+    >
+      <div class="paragraph-inter-16-semi-bold mb-4">
+        {{ formatMessage('add_widget_section_social') }}
+      </div>
+      <div class="flex gap-5">
+        <!-- X -->
+        <lukso-tooltip
+          variant="light"
+          :show-delay="SHOW_TOOLTIP_DELAY"
+          :text="formatMessage('widget_type_x')"
+        >
+          <img
+            src="/images/social-media-x.svg"
+            :alt="formatMessage('widget_type_x')"
+            class="cursor-pointer transition hover:scale-105"
+            @click="handleSelectWidget('X')"
+          />
+        </lukso-tooltip>
+
+        <!-- Warpcast -->
+        <lukso-tooltip
+          variant="light"
+          :show-delay="SHOW_TOOLTIP_DELAY"
+          :text="formatMessage('widget_type_warpcast')"
+        >
+          <img
+            src="/images/social-media-warpcast.png"
+            :alt="formatMessage('widget_type_warpcast')"
+            class="size-10 cursor-pointer rounded-full transition hover:scale-105"
+            @click="handleSelectWidget('WARPCAST')"
+          />
+        </lukso-tooltip>
+
+        <!-- Instagram -->
+        <lukso-tooltip
+          variant="light"
+          :show-delay="SHOW_TOOLTIP_DELAY"
+          :text="formatMessage('widget_type_instagram')"
+        >
+          <img
+            src="/images/social-media-instagram.svg"
+            :alt="formatMessage('widget_type_instagram')"
+            class="size-10 cursor-pointer rounded-full transition hover:scale-105"
+            @click="handleSelectWidget('INSTAGRAM')"
+          />
+        </lukso-tooltip>
+      </div>
+    </section>
+  </div>
+</template>
diff --git a/domains/grid/components/AddWidgetText.vue b/domains/grid/components/AddWidgetText.vue
new file mode 100644
index 00000000..0c55581f
--- /dev/null
+++ b/domains/grid/components/AddWidgetText.vue
@@ -0,0 +1,195 @@
+<script setup lang="ts">
+type Props = {
+  type: GridWidgetType
+  id?: string
+  properties?: TextWidgetProperties
+  width?: number
+  height?: number
+}
+
+const props = defineProps<Props>()
+const { formatMessage } = useIntl()
+const { closeModal, showModal } = useModal()
+const { addGridWidget, updateGridWidget, getGridById } = useGrid()
+const { tempGrid, selectedGridId } = storeToRefs(useGridStore())
+const schemaMap = WIDGET_SCHEMA_MAP[props.type]
+const isEdit = computed(() => !!props.id)
+const {
+  inputValues,
+  canSubmit,
+  getFieldErrorMessage,
+  handleFieldChange,
+  handleFormErrors,
+} = useForm(
+  schemaMap?.input,
+  (await schemaMap?.build?.safeParseAsync(props.properties || {}))?.data
+)
+
+const handleSave = async () => {
+  if (!canSubmit.value) {
+    return
+  }
+
+  try {
+    const properties = await schemaMap?.input?.parseAsync(inputValues.value)
+
+    if (isEdit.value) {
+      updateGridWidget(props.id, {
+        properties,
+        w: props.width,
+        h: props.height,
+      })
+    } else {
+      const newWidget: GridWidgetWithoutCords = createWidgetObject({
+        type: props.type,
+        properties,
+        w: props.width,
+        h: props.height,
+      })
+
+      addGridWidget(
+        newWidget,
+        getGridById(tempGrid.value, selectedGridId.value)
+      )
+    }
+
+    handleCancel()
+  } catch (error: unknown) {
+    handleFormErrors(error)
+  }
+}
+
+const handleCancel = () => {
+  closeModal()
+}
+
+const handleBackToSelection = () => {
+  showModal<Partial<GridWidget>>({
+    template: 'AddGridWidget',
+    forceOpen: true,
+  })
+}
+</script>
+
+<template>
+  <div class="p-6">
+    <div class="flex items-center gap-3 pb-4">
+      <lukso-icon
+        v-if="!isEdit"
+        name="arrow-left-sm"
+        class="relative z-[1] cursor-pointer rounded-full bg-neutral-100 shadow-neutral-above-shadow transition hover:scale-105 hover:shadow-neutral-above-shadow-1xl active:scale-100 active:shadow-neutral-above-shadow"
+        @click="handleBackToSelection"
+      ></lukso-icon>
+      <div class="heading-inter-21-semi-bold">
+        {{
+          formatMessage(
+            `${isEdit ? 'edit' : 'add'}_widget_${type.toLowerCase()}_title`
+          )
+        }}
+      </div>
+    </div>
+    <div class="paragraph-inter-14-regular pb-6">
+      {{
+        formatMessage(
+          `${isEdit ? 'edit' : 'add'}_widget_${type.toLowerCase()}_description`
+        )
+      }}
+    </div>
+
+    <div class="flex flex-col gap-4">
+      <!-- Background color -->
+      <lukso-color-picker
+        .value="inputValues?.backgroundColor"
+        id="background-color"
+        :label="formatMessage('add_widget_text_background_color_label')"
+        :placeholder="
+          formatMessage('add_widget_text_background_color_placeholder')
+        "
+        :error="getFieldErrorMessage('backgroundColor')"
+        autofocus
+        @on-input="
+          (customEvent: CustomEvent) =>
+            handleFieldChange(customEvent, 'backgroundColor')
+        "
+      ></lukso-color-picker>
+
+      <div class="flex flex-col gap-2">
+        <!-- Title -->
+        <lukso-input
+          .value="inputValues?.title"
+          :label="formatMessage('add_widget_text_title_label')"
+          :placeholder="formatMessage('add_widget_text_title_placeholder')"
+          is-full-width
+          @on-input="
+            (customEvent: CustomEvent) =>
+              handleFieldChange(customEvent, 'title')
+          "
+        ></lukso-input>
+
+        <!-- Title color -->
+        <lukso-color-picker
+          .value="inputValues?.titleColor"
+          :placeholder="
+            formatMessage('add_widget_text_title_color_placeholder')
+          "
+          :error="getFieldErrorMessage('titleColor')"
+          @on-input="
+            (customEvent: CustomEvent) =>
+              handleFieldChange(customEvent, 'titleColor')
+          "
+        ></lukso-color-picker>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <!-- Description -->
+        <lukso-textarea
+          :value="inputValues?.text"
+          :label="formatMessage('add_widget_text_text_label')"
+          :placeholder="formatMessage('add_widget_text_text_placeholder')"
+          is-full-width
+          rows="3"
+          @on-input="
+            (customEvent: CustomEvent) => handleFieldChange(customEvent, 'text')
+          "
+        ></lukso-textarea>
+
+        <!-- Description color -->
+        <lukso-color-picker
+          .value="inputValues?.textColor"
+          :placeholder="formatMessage('add_widget_text_text_color_placeholder')"
+          :error="getFieldErrorMessage('textColor')"
+          @on-input="
+            (customEvent: CustomEvent) =>
+              handleFieldChange(customEvent, 'textColor')
+          "
+        ></lukso-color-picker>
+      </div>
+
+      <!-- Link -->
+      <lukso-input
+        .value="inputValues?.link"
+        :label="formatMessage('add_widget_text_link_label')"
+        :placeholder="formatMessage('add_widget_text_link_placeholder')"
+        is-full-width
+        @on-input="
+          (customEvent: CustomEvent) => handleFieldChange(customEvent, 'link')
+        "
+      ></lukso-input>
+    </div>
+
+    <!-- Buttons -->
+    <div class="grid grid-cols-[max-content,auto] pt-6">
+      <lukso-button variant="text" @click="handleCancel">
+        {{ formatMessage('add_widget_cancel') }}
+      </lukso-button>
+      <lukso-button
+        :disabled="!canSubmit ? true : undefined"
+        variant="landing"
+        is-full-width
+        @click="handleSave"
+      >
+        {{ formatMessage('add_widget_confirm') }}
+      </lukso-button>
+    </div>
+  </div>
+</template>
diff --git a/domains/grid/components/GridFloatingMenu.vue b/domains/grid/components/GridFloatingMenu.vue
new file mode 100644
index 00000000..4a4afda3
--- /dev/null
+++ b/domains/grid/components/GridFloatingMenu.vue
@@ -0,0 +1,241 @@
+<script setup lang="ts">
+import { useElementSize } from '@vueuse/core'
+import { tv } from 'tailwind-variants'
+
+type Emits = {
+  (event: 'on-reset'): void
+  (event: 'on-save'): void
+  (event: 'on-add-grid'): void
+}
+
+const BOTTOM_MARGIN_DESKTOP_PX = 40
+const BOTTOM_MARGIN_MOBILE_PX = 16
+
+const emits = defineEmits<Emits>()
+const { isEditingGrid, hasUnsavedGrid, isSavingGrid } =
+  storeToRefs(useGridStore())
+const { isConnected, isMobile, isViewingOwnProfile } =
+  storeToRefs(useAppStore())
+const { formatMessage } = useIntl()
+const { showModal } = useModal()
+const bottom = ref(
+  isMobile.value ? BOTTOM_MARGIN_MOBILE_PX : BOTTOM_MARGIN_DESKTOP_PX
+)
+const menuRef = ref<HTMLElement | null>(null)
+
+const handleToggleGridEditMode = async () => {
+  isEditingGrid.value = !isEditingGrid.value
+  setTimeout(() => {
+    handleScroll()
+  }, 200)
+}
+
+const handleAddContent = () => {
+  showModal<Partial<GridWidget>>({
+    template: 'AddGridWidget',
+  })
+}
+
+const handleAddGrid = () => {
+  showModal<Partial<Grid>>({
+    template: 'AddEditGrid',
+  })
+}
+
+const handleStyle = computed(() => {
+  return {
+    bottom: `${bottom.value}px`,
+    transition: 'all 0.3s ease-in-out',
+  }
+})
+
+const baseButtonVariants = tv({
+  base: 'flex size-10 items-center justify-center rounded-full transition-all duration-300',
+  variants: {
+    isDisabled: {
+      true: '',
+      false: 'cursor-pointer hover:scale-105',
+    },
+  },
+})
+
+const defaultButtonVariants = tv({
+  extend: baseButtonVariants,
+  base: 'bg-neutral-97',
+  variants: {
+    isDisabled: {
+      true: '',
+      false: 'hover:bg-neutral-95',
+    },
+  },
+})
+
+const resetButtonVariants = tv({
+  extend: baseButtonVariants,
+  variants: {
+    isDisabled: {
+      true: 'bg-neutral-97',
+      false: 'cursor-pointer bg-[#ffe0e0] hover:scale-105 hover:bg-[#ffd1d1]',
+    },
+  },
+})
+
+const saveButtonVariants = tv({
+  extend: baseButtonVariants,
+  variants: {
+    isDisabled: {
+      true: 'bg-neutral-97',
+      false: 'cursor-pointer bg-[#E2FFEA] hover:scale-105 hover:bg-[#d6ffe2]',
+    },
+  },
+})
+
+const styles = computed(() => {
+  return {
+    addWidgetButton: defaultButtonVariants(),
+    addGridButton: defaultButtonVariants(),
+    saveButton: saveButtonVariants({
+      isDisabled: !hasUnsavedGrid.value,
+    }),
+    resetButton: resetButtonVariants({
+      isDisabled: !hasUnsavedGrid.value,
+    }),
+    toggleButton: defaultButtonVariants(),
+  }
+})
+
+const handleScroll = () => {
+  const bottomMargin = isMobile.value
+    ? BOTTOM_MARGIN_MOBILE_PX
+    : BOTTOM_MARGIN_DESKTOP_PX
+  const bottomOffset =
+    (document.querySelector('lukso-footer')?.clientHeight || 0) +
+    BOTTOM_MARGIN_DESKTOP_PX
+  const scrollTop = window.scrollY
+  const windowHeight = window.innerHeight
+  const documentHeight = document.documentElement.scrollHeight
+  const { height: menuHeight } = useElementSize(menuRef)
+
+  // if user scroll to the bottom we keep menu above footer
+  if (scrollTop + windowHeight + bottomOffset >= documentHeight) {
+    bottom.value =
+      scrollTop + windowHeight + bottomOffset + bottomMargin - documentHeight
+    return
+  }
+
+  // if mobile keep menu at the bottom of the screen
+  if (isMobile.value) {
+    bottom.value = bottomMargin
+    return
+  }
+
+  // otherwise we keep menu in the middle of the screen
+  bottom.value = windowHeight / 2 - 0.5 * menuHeight.value
+}
+
+onMounted(() => {
+  window.addEventListener('scroll', handleScroll)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', handleScroll)
+})
+</script>
+
+<template>
+  <div
+    v-if="isConnected && isViewingOwnProfile"
+    ref="menuRef"
+    class="fixed z-50 flex animate-fade-in gap-6 overflow-hidden rounded-full bg-neutral-100 p-3 shadow-neutral-shadow-round duration-300 ease-in-out sm:bottom-10 sm:right-10 sm:flex-col sm:transition lg:right-[calc(50%-540px)]"
+    :class="{
+      'right-[calc(50%-160px)] h-[64px] w-[320px] sm:h-[320px] sm:w-[64px]':
+        isEditingGrid,
+      'right-4 size-[64px]': !isEditingGrid,
+    }"
+    :style="handleStyle"
+  >
+    <div v-if="isEditingGrid" class="flex animate-fade-in gap-6 sm:flex-col">
+      <!-- Add widget  -->
+      <lukso-tooltip
+        :class="styles.addWidgetButton"
+        :text="!isMobile ? formatMessage('grid_add_widget') : ''"
+        placement="left"
+        :offset="15"
+        :show-delay="1000"
+        @click="handleAddContent"
+      >
+        <lukso-icon name="plus" color="purple-41"></lukso-icon>
+      </lukso-tooltip>
+
+      <!-- Add grid  -->
+      <lukso-tooltip
+        :class="styles.addGridButton"
+        :text="!isMobile ? formatMessage('grid_add_grid') : ''"
+        placement="left"
+        :offset="15"
+        :show-delay="1000"
+        @click="handleAddGrid"
+      >
+        <lukso-icon name="add-grid" color="purple-41"></lukso-icon>
+      </lukso-tooltip>
+
+      <!-- Reset  -->
+      <lukso-tooltip
+        :class="styles.resetButton"
+        :text="
+          hasUnsavedGrid && !isMobile ? formatMessage('grid_can_reset') : ''
+        "
+        placement="left"
+        :offset="15"
+        :show-delay="1000"
+        @click="hasUnsavedGrid ? emits('on-reset') : undefined"
+      >
+        <lukso-icon
+          name="reload"
+          :color="hasUnsavedGrid ? 'red-65' : 'neutral-85'"
+          class="-rotate-90 transition"
+        ></lukso-icon>
+      </lukso-tooltip>
+    </div>
+
+    <!-- Edit mode toggle -->
+    <lukso-tooltip
+      :class="styles.toggleButton"
+      :text="
+        !isMobile
+          ? isEditingGrid
+            ? formatMessage('grid_exit_edit_mode')
+            : formatMessage('grid_enable_edit_mode')
+          : ''
+      "
+      placement="left"
+      :offset="15"
+      :show-delay="1000"
+      @click="handleToggleGridEditMode"
+    >
+      <lukso-icon
+        :name="isEditingGrid ? 'close-lg' : 'edit'"
+        color="purple-41"
+      ></lukso-icon>
+    </lukso-tooltip>
+
+    <!-- Save  -->
+    <lukso-tooltip
+      v-if="isEditingGrid"
+      :class="styles.saveButton"
+      :text="hasUnsavedGrid && !isMobile ? formatMessage('grid_can_save') : ''"
+      placement="left"
+      :offset="15"
+      :show-delay="1000"
+      @click="hasUnsavedGrid && !isSavingGrid ? emits('on-save') : undefined"
+    >
+      <lukso-icon
+        :name="isSavingGrid ? 'spinner' : 'tick'"
+        :color="hasUnsavedGrid ? 'green-54' : 'neutral-85'"
+        :class="{
+          'animate-spin': isSavingGrid,
+        }"
+      ></lukso-icon>
+    </lukso-tooltip>
+  </div>
+</template>
diff --git a/domains/grid/components/GridTabs.vue b/domains/grid/components/GridTabs.vue
new file mode 100644
index 00000000..55f433c8
--- /dev/null
+++ b/domains/grid/components/GridTabs.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import draggable from 'vuedraggable'
+
+type GridTab = {
+  grid: Grid
+}
+
+const { selectedGridId, tempGrid, viewedGrid } = storeToRefs(useGridStore())
+const { isMobile } = storeToRefs(useAppStore())
+const { canEditGrid, gridsForDisplay } = useGrid()
+const tabs = ref<GridTab[]>([])
+
+// we only show tabs when user has more then one
+const hasTabs = computed(() => tabs.value.length > 1)
+
+const handleDragEnd = () => {
+  tempGrid.value = cloneObject(tabs.value.map(tab => tab.grid))
+}
+
+watch(
+  [canEditGrid, tempGrid, viewedGrid],
+  () => {
+    tabs.value = gridsForDisplay.value
+  },
+  { immediate: true, deep: true }
+)
+</script>
+
+<template>
+  <div class="ml-4 flex select-none gap-x-6 gap-y-3 pb-4">
+    <!-- Draggable Grid tabs -->
+    <draggable
+      v-if="canEditGrid && !isMobile"
+      v-model="tabs"
+      tag="ul"
+      :animation="300"
+      item-key="grid.id"
+      class="flex flex-wrap justify-start gap-x-6 gap-y-3"
+      @end="handleDragEnd"
+    >
+      <template #item="{ element: tab }">
+        <GridTabsItem
+          :grid="tab.grid"
+          :is-active="tab.grid.id === selectedGridId"
+          is-moveable
+        />
+      </template>
+    </draggable>
+
+    <!-- Static Grid tabs -->
+    <ul
+      v-else-if="hasTabs"
+      class="flex flex-wrap justify-start gap-x-6 gap-y-3"
+    >
+      <GridTabsItem
+        v-for="tab in tabs"
+        :key="tab.grid.id"
+        :grid="tab.grid"
+        :is-active="tab.grid.id === selectedGridId"
+      />
+    </ul>
+  </div>
+</template>
diff --git a/domains/grid/components/GridTabsItem.vue b/domains/grid/components/GridTabsItem.vue
new file mode 100644
index 00000000..82617f15
--- /dev/null
+++ b/domains/grid/components/GridTabsItem.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { tv } from 'tailwind-variants'
+
+type Props = {
+  grid: Grid
+  isActive: boolean
+  isMoveable?: boolean
+}
+
+const props = defineProps<Props>()
+const { formatMessage } = useIntl()
+const { canEditGrid, addGrid } = useGrid()
+const { showModal } = useModal()
+const { selectedGridId, tempGrid } = storeToRefs(useGridStore())
+const { isMobile } = storeToRefs(useAppStore())
+const dropdownId = `dropdown-${generateItemId()}`
+
+const styleVariants = tv({
+  slots: {
+    label: 'whitespace-nowrap',
+  },
+  variants: {
+    isActive: {
+      true: {
+        label: 'cursor-default',
+      },
+      false: {
+        label: 'cursor-pointer opacity-50 transition hover:opacity-100',
+      },
+    },
+    isMoveable: {
+      true: {
+        label: '!cursor-ew-resize',
+      },
+    },
+  },
+})
+
+const styles = computed(() => {
+  return styleVariants({
+    isActive: props.isActive,
+    isMoveable: props.isMoveable,
+  })
+})
+
+const handleEdit = () => {
+  showModal<Partial<Grid>>({
+    template: 'AddEditGrid',
+    data: {
+      id: props.grid.id,
+      title: props.grid.title,
+      gridColumns: props.grid.gridColumns,
+    },
+  })
+}
+
+const handleDelete = () => {
+  showModal({
+    template: 'DeleteGrid',
+    data: {
+      id: props.grid.id,
+      title: props.grid.title,
+    },
+  })
+}
+
+const handleDuplicate = () => {
+  const newGrid: Grid = {
+    id: createGridId(props.grid, tempGrid.value),
+    title: formatMessage('grid_tabs_copy_of', { title: props.grid.title }),
+    grid: props.grid.grid,
+    gridColumns: props.grid.gridColumns,
+  }
+
+  addGrid(newGrid)
+  selectedGridId.value = newGrid.id
+}
+
+const handleSelectTab = (id: string) => {
+  selectedGridId.value = id
+}
+</script>
+
+<template>
+  <li class="heading-inter-17-semi-bold flex min-h-[26px] items-center">
+    <div class="group relative flex w-full items-center">
+      <div :class="styles.label()" @click="handleSelectTab(grid.id)">
+        {{ grid.title }}
+      </div>
+      <lukso-icon
+        v-if="canEditGrid && !isMobile"
+        :id="dropdownId"
+        class="absolute right-[-18px] mx-1 -mr-1 cursor-pointer p-1 opacity-0 transition hover:!opacity-100 group-hover:opacity-50"
+        name="edit"
+        size="small"
+      ></lukso-icon>
+    </div>
+    <lukso-dropdown
+      :trigger-id="dropdownId"
+      size="medium"
+      class="relative -bottom-2 -left-2"
+    >
+      <!-- Edit option -->
+      <lukso-dropdown-option size="medium" @click="handleEdit">
+        <lukso-icon name="edit" size="small"></lukso-icon>
+        {{ formatMessage('grid_tabs_menu_edit') }}</lukso-dropdown-option
+      >
+
+      <!-- Duplicate option -->
+      <lukso-dropdown-option size="medium" @click="handleDuplicate">
+        <lukso-icon name="copy" size="small"></lukso-icon>
+        {{ formatMessage('grid_tabs_menu_duplicate') }}</lukso-dropdown-option
+      >
+
+      <!-- Delete option -->
+      <lukso-dropdown-option size="medium" @click="handleDelete">
+        <lukso-icon name="trash" size="small" color="red-65"></lukso-icon>
+        <span class="text-red-65">
+          {{ formatMessage('grid_tabs_menu_delete') }}
+        </span>
+      </lukso-dropdown-option>
+    </lukso-dropdown>
+  </li>
+</template>
diff --git a/domains/grid/components/GridView.vue b/domains/grid/components/GridView.vue
new file mode 100644
index 00000000..9091ea95
--- /dev/null
+++ b/domains/grid/components/GridView.vue
@@ -0,0 +1,302 @@
+<script setup lang="ts">
+import { useElementSize } from '@vueuse/core'
+import { GridItem, GridLayout } from 'grid-layout-plus'
+
+const { isMobile } = storeToRefs(useAppStore())
+const {
+  isEditingGrid,
+  tempGrid,
+  viewedGrid,
+  hasUnsavedGrid,
+  gridRowHeightRatio,
+  selectedGridId,
+  isSavingGrid,
+  mobileLimitationsDisplayed,
+} = storeToRefs(useGridStore())
+const {
+  saveGrid,
+  canEditGrid,
+  getSelectedGridWidgets,
+  updateSelectedGrid,
+  initSelectedGridId,
+  getGridById,
+  gridsForTabs,
+} = useGrid()
+const { showModal } = useModal()
+const { formatMessage } = useIntl()
+const gridContainer = ref<HTMLElement | null>(null)
+const { width } = useElementSize(gridContainer)
+const gridWidgets = ref<GridWidget[]>([])
+const movementX = ref(0)
+const address = computed(() => getCurrentProfileAddress())
+
+const currentGrid = () => {
+  // when user is editing and has unsaved changes, use temp grid
+  if (canEditGrid.value && hasUnsavedGrid.value) {
+    return tempGrid.value
+  }
+
+  return viewedGrid.value
+}
+
+const gridRowHeight = computed(() => {
+  const columnSpacing = GRID_SPACING_PX * (gridColumnNumber.value - 1)
+  const columnWidth = width.value - columnSpacing
+  const rowHeight =
+    (columnWidth / gridColumnNumber.value) * gridRowHeightRatio.value
+
+  return rowHeight
+})
+
+const gridColumnNumber = computed(() =>
+  isMobile.value
+    ? 1
+    : getGridById(currentGrid(), selectedGridId.value)?.gridColumns ||
+      GRID_COLUMNS_MIN
+)
+
+const itemStyle = computed(() => (item: GridWidget) => {
+  const element = document.getElementById(`gridItem-${item.i}`)
+
+  // we only want to rotate item while dragging
+  if (element?.classList.contains('vgl-item--dragging')) {
+    // calculate rotation based on mouse movement speed
+    const rotate = Math.min(
+      Math.max(movementX.value, -MAX_WIDGET_ROTATE_WHILE_MOVE_DEG),
+      MAX_WIDGET_ROTATE_WHILE_MOVE_DEG
+    )
+
+    return {
+      transform: `rotate(${rotate}deg)`,
+      transition: 'transform 0.2s',
+    }
+  }
+})
+
+const handleMouseMove = (event: MouseEvent) => {
+  movementX.value = event.movementX
+}
+
+const handleUpdateGrid = (newGrid: GridWidget[]) => {
+  if (gridLog.enabled) {
+    gridLog('Grid updated', toRaw(newGrid))
+  }
+
+  gridWidgets.value = newGrid
+}
+
+const handleSaveGrid = async () => {
+  if (!canEditGrid.value) {
+    return
+  }
+
+  await saveGrid(tempGrid.value)
+}
+
+const handleResetGrid = async () => {
+  const userGrid = await getUserGrid(address.value)
+  const _grid = buildGrid(userGrid, isMobile.value, canEditGrid.value)
+
+  // when user has no grids we re-create empty grids
+  if (_grid.length === 0) {
+    viewedGrid.value = cloneObject(EMPTY_GRID)
+    tempGrid.value = cloneObject(EMPTY_GRID)
+  } else {
+    tempGrid.value = cloneObject(_grid)
+    viewedGrid.value = cloneObject(_grid)
+  }
+
+  gridWidgets.value = getSelectedGridWidgets(cloneObject(_grid))
+  isSavingGrid.value = false
+
+  // if selected grid is affected by reset, select first grid
+  if (!viewedGrid.value.some(item => item.id === selectedGridId.value)) {
+    selectedGridId.value = viewedGrid.value[0]?.id
+  }
+}
+
+const clearSelection = () => {
+  window.getSelection()?.removeAllRanges()
+}
+
+const handleItemMove = () => {
+  clearSelection()
+}
+
+const handleItemMoved = () => {
+  clearSelection()
+  tempGrid.value = updateSelectedGrid(gridWidgets.value)
+}
+
+const handleItemResize = () => {
+  clearSelection()
+}
+
+const handleItemResized = () => {
+  clearSelection()
+  tempGrid.value = updateSelectedGrid(gridWidgets.value)
+}
+
+// rebuild grid and track unsaved state when:
+// - user make modifications in widgets (add/edit/remove/resize)
+// - user toggles edit mode
+watch(
+  [tempGrid, isEditingGrid, selectedGridId, isMobile, viewedGrid],
+  () => {
+    const updatedViewedGrid = buildGrid(
+      viewedGrid.value,
+      isMobile.value,
+      canEditGrid.value || gridsForTabs.value.length === 1
+    )
+
+    // if user is in edit mode we use temp grid, otherwise viewed grid
+    if (canEditGrid.value) {
+      const updatedTempGrid = buildGrid(
+        tempGrid.value,
+        isMobile.value,
+        canEditGrid.value || gridsForTabs.value.length === 1
+      )
+      gridWidgets.value = getSelectedGridWidgets(updatedTempGrid)
+      const changes = compareGrids(updatedViewedGrid, updatedTempGrid)
+
+      if (changes.length > 0) {
+        hasUnsavedGrid.value = true
+      } else {
+        hasUnsavedGrid.value = false
+      }
+
+      // show mobile limitations modal (only once)
+      if (isMobile.value && !mobileLimitationsDisplayed.value) {
+        showModal<DefaultModalData>({
+          data: {
+            icon: '/images/grid.svg',
+            title: formatMessage('grid_mobile_limitations_title'),
+            message: formatMessage('grid_mobile_limitations_message'),
+            confirmButtonText: formatMessage('grid_mobile_limitations_confirm'),
+          },
+        })
+        mobileLimitationsDisplayed.value = true
+      }
+    } else {
+      gridWidgets.value = getSelectedGridWidgets(updatedViewedGrid)
+    }
+
+    // re-init selected grid id when user toggles edit mode in case the selected grid was changed
+    initSelectedGridId()
+  },
+  { deep: true, immediate: true }
+)
+
+onMounted(() => {
+  document.addEventListener('mousemove', handleMouseMove)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('mousemove', handleMouseMove)
+})
+</script>
+
+<template>
+  <div class="w-full">
+    <div class="mx-auto max-w-content" ref="gridContainer">
+      <GridTabs />
+      <GridLayout
+        v-model:layout="gridWidgets"
+        :col-num="gridColumnNumber"
+        :row-height="gridRowHeight"
+        :is-draggable="canEditGrid"
+        :is-resizable="canEditGrid"
+        :responsive="false"
+        :is-bounded="false"
+        :margin="[GRID_SPACING_PX, GRID_SPACING_PX]"
+        :use-css-transforms="false"
+        class="-m-4"
+        @layout-updated="handleUpdateGrid"
+      >
+        <GridItem
+          :id="`gridItem-${item.i}`"
+          v-for="item in gridWidgets"
+          :key="item.i"
+          :x="item.x"
+          :y="item.y"
+          :w="item.w"
+          :h="item.h"
+          :i="item.i"
+          :is-draggable="item.isDraggable"
+          :is-resizable="item.isResizable"
+          :static="item.static"
+          @move="handleItemMove"
+          @moved="handleItemMoved"
+          @resize="handleItemResize"
+          @resized="handleItemResized"
+          drag-allow-from=".grid-move-overlay"
+          :resize-option="{
+            edges: {
+              top: false,
+              left: false,
+              bottom: '.grid-widget-resize',
+              right: '.grid-widget-resize',
+            },
+          }"
+          :style="itemStyle(item)"
+        >
+          <GridWidget :widget="item" />
+        </GridItem>
+      </GridLayout>
+    </div>
+
+    <!-- Grid floating menu -->
+    <GridFloatingMenu @on-save="handleSaveGrid" @on-reset="handleResetGrid" />
+  </div>
+</template>
+
+<style scoped>
+/* stylelint-disable selector-class-pattern */
+
+/* CSS variables for grid layout */
+.vgl-layout {
+  --vgl-placeholder-bg: transparent;
+  --vgl-placeholder-opacity: 100%;
+  --vgl-item-dragging-z-index: 30;
+}
+
+:deep(.vgl-item__resizer) {
+  display: none; /* hide library resizer handle to use custom one */
+}
+
+:deep(.vgl-item--dragging) {
+  & > div {
+    transition: transform 0.2s;
+    border-radius: 12px;
+    border: 1px solid var(--neutrals-neutral-90, #dee7ed);
+    background: rgb(255 255 255 / 15%);
+    box-shadow:
+      0 185px 52px 0 rgba(63 93 116 / 0%),
+      0 118px 47px 0 rgba(63 93 116 / 2%),
+      0 67px 40px 0 rgba(63 93 116 / 8%),
+      0 30px 30px 0 rgba(63 93 116 / 13%),
+      0 7px 16px 0 rgba(63 93 116 / 15%),
+      0 0 0 0 rgba(63 93 116 / 16%);
+    backdrop-filter: blur(2px);
+  }
+
+  .grid-widget-options,
+  .grid-widget-resize {
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+}
+
+:deep(.vgl-item--placeholder) {
+  border-radius: 12px;
+  border: 1px solid #dee7ed;
+  background: #f5f8fa;
+  box-shadow:
+    0 30px 8px 0 rgba(63 93 116 / 0%) inset,
+    0 19px 8px 0 rgba(63 93 116 / 2%) inset,
+    0 11px 6px 0 rgba(63 93 116 / 8%) inset,
+    0 5px 5px 0 rgba(63 93 116 / 13%) inset,
+    0 1px 3px 0 rgba(63 93 116 / 15%) inset,
+    0 0 0 0 rgba(63 93 116 / 16%) inset;
+}
+</style>
diff --git a/domains/grid/components/GridWidget.vue b/domains/grid/components/GridWidget.vue
new file mode 100644
index 00000000..f4cefbbd
--- /dev/null
+++ b/domains/grid/components/GridWidget.vue
@@ -0,0 +1,340 @@
+<script setup lang="ts">
+import { detectSocialMedia } from '@lukso/web-components/tools'
+import { computedAsync, useIntersectionObserver } from '@vueuse/core'
+import { z } from 'zod'
+
+import type { GridWidgetType } from '@/types/grid'
+import type { LuksoDropdownOnChangeEventDetail } from '@lukso/web-components'
+
+type Props = {
+  widget: GridWidget
+}
+
+const props = defineProps<Props>()
+const widgetComponent = shallowRef<Component | undefined>()
+const { canEditGrid, addGridWidget, getGridById } = useGrid()
+const { formatMessage } = useIntl()
+const { showModal } = useModal()
+const { isConnected, isMobile, isViewingOwnProfile, connectedProfileAddress } =
+  storeToRefs(useAppStore())
+const { isEditingGrid, tempGrid, selectedGridId, tempGrids } =
+  storeToRefs(useGridStore())
+const { connect } = useBaseProvider()
+const { browserSupportExtension } = useBrowser()
+const dropdownId = `dropdown-${generateItemId()}`
+const isOpen = ref<boolean | undefined>(undefined)
+const targetIsVisible = ref(false)
+const target = ref<HTMLElement | null>(null)
+
+const widgetProperties = computedAsync(async () => {
+  const schemaMap = WIDGET_SCHEMA_MAP[props.widget.type]
+  const parse = await schemaMap?.build?.safeParseAsync(props.widget.properties)
+
+  return parse?.data
+})
+
+const isAllowToEdit = computed(
+  () => canEditGrid.value && !isAddContentWidget.value
+)
+
+const isAddContentWidget = computed(
+  () => props.widget.type === GRID_WIDGET_TYPE.enum.ADD_CONTENT
+)
+
+const isAllowToClone = computed(
+  () => isEditingGrid.value || !isViewingOwnProfile.value
+)
+
+const src = computedAsync(async () => {
+  const schema = z.object({
+    src: z.string().transform(urlTransform),
+  })
+  const validate = await schema.safeParseAsync(props.widget.properties)
+
+  return validate.data?.src
+})
+
+const isAllowToOpenInNewTab = computed(() => !!src.value)
+
+const isAllowToShowOptions = computed(
+  () =>
+    !isAddContentWidget.value &&
+    (isAllowToClone.value || isAllowToOpenInNewTab.value || isAllowToEdit.value)
+)
+
+const WIDGET_COMPONENTS: Record<GridWidgetType, string> = {
+  [GRID_WIDGET_TYPE.enum.TEXT]: 'Text',
+  [GRID_WIDGET_TYPE.enum.IMAGES]: 'Images',
+  [GRID_WIDGET_TYPE.enum.IFRAME]: 'Iframe',
+  [GRID_WIDGET_TYPE.enum.X]: 'X',
+  [GRID_WIDGET_TYPE.enum.INSTAGRAM]: 'Instagram',
+  [GRID_WIDGET_TYPE.enum.ADD_CONTENT]: 'AddContent',
+  [GRID_WIDGET_TYPE.enum.SPOTIFY]: 'Spotify',
+  [GRID_WIDGET_TYPE.enum.SOUNDCLOUD]: 'Iframe',
+  [GRID_WIDGET_TYPE.enum.WARPCAST]: 'Iframe',
+  [GRID_WIDGET_TYPE.enum.ELFSIGHT]: 'Elfsight',
+  [GRID_WIDGET_TYPE.enum.YOUTUBE]: 'Iframe',
+}
+
+const loadWidgetComponent = async (widget: GridWidget) => {
+  let type = widget.type
+
+  if (type === GRID_WIDGET_TYPE.enum.IFRAME && 'src' in widget.properties) {
+    const platform = detectSocialMedia(widget?.properties?.src)
+
+    if (platform) {
+      type = platform.toUpperCase() as GridWidgetType
+    }
+  }
+
+  if (!WIDGET_COMPONENTS[type]) {
+    console.warn(`Widget type ${type} is not supported`)
+    return undefined
+  }
+
+  return defineAsyncComponent(
+    () => import(`./GridWidget${WIDGET_COMPONENTS[type]}.vue`)
+  )
+}
+
+const handleDelete = () => {
+  showModal({
+    template: 'DeleteGridWidget',
+    data: {
+      id: props.widget.i,
+    },
+  })
+}
+
+const handleEdit = () => {
+  showModal<Partial<GridWidget>>({
+    template: 'AddGridWidget',
+    data: {
+      properties: props.widget.properties,
+      i: props.widget.i,
+      type: props.widget.type,
+      w: props.widget.w,
+      h: props.widget.h,
+    },
+  })
+}
+
+const handleMove = () => {
+  showModal({
+    template: 'MoveGridWidget',
+    data: {
+      type: props.widget.type,
+      properties: props.widget.properties,
+      id: props.widget.i,
+      w: props.widget.w,
+      h: props.widget.h,
+    },
+  })
+}
+
+const handleOpenInTab = () => {
+  navigateTo(src.value, {
+    external: true,
+    open: {
+      target: '_blank',
+    },
+  })
+}
+
+const handleClone = async () => {
+  if (!browserSupportExtension.value && !isMobile.value) {
+    return
+  }
+
+  if (!isConnected.value) {
+    await connect()
+  }
+
+  const _connectedProfileAddress =
+    connectedProfileAddress.value?.toLowerCase() as Address
+  const clonedWidget = createWidgetObject({
+    type: props.widget.type,
+    properties: props.widget.properties,
+    w: props.widget.w,
+    h: props.widget.h,
+  })
+  isEditingGrid.value = true // we enable edit mode so user is aware about unsaved state
+
+  // in case we are on own profile we do simply widget copy
+  if (isViewingOwnProfile.value) {
+    addGridWidget(
+      clonedWidget,
+      getGridById(tempGrid.value, selectedGridId.value)
+    )
+    return
+  }
+
+  // re-create temp grid if missing
+  if (!tempGrids.value[_connectedProfileAddress]) {
+    const userGrid = await getUserGrid(_connectedProfileAddress)
+    tempGrids.value[_connectedProfileAddress] = buildGrid(
+      userGrid,
+      isMobile.value
+    )
+  }
+
+  addGridWidget(
+    clonedWidget,
+    getGridById(
+      tempGrids.value[_connectedProfileAddress],
+      tempGrids.value[_connectedProfileAddress][0].id
+    )
+  )
+  showModal({
+    template: 'GridWidgetCloned',
+  })
+}
+
+const handleDropdownChange = (
+  event: CustomEvent<LuksoDropdownOnChangeEventDetail>
+) => {
+  isOpen.value = event.detail?.isOpen ? true : undefined
+}
+
+onMounted(async () => {
+  widgetComponent.value = await loadWidgetComponent(props.widget)
+
+  setTimeout(() => {
+    useIntersectionObserver(
+      target,
+      ([{ isIntersecting }], _observerElement) => {
+        targetIsVisible.value = targetIsVisible.value || isIntersecting
+      },
+      {
+        rootMargin: '100px', // load margin before target appear in viewport
+      }
+    )
+  }, 1)
+})
+</script>
+
+<template>
+  <div
+    ref="target"
+    class="group relative flex h-full flex-col rounded-12 transition"
+    :class="{
+      'bg-neutral-100 shadow-neutral-shadow-round hover:shadow-neutral-shadow-round-1xl':
+        !isAddContentWidget,
+      'select-none': isAllowToEdit,
+      'z-50': isOpen,
+    }"
+  >
+    <!-- Move overlay -->
+    <div
+      v-if="isAllowToEdit && !isMobile"
+      class="grid-move-overlay absolute inset-0 z-10 cursor-move rounded-[inherit] bg-neutral-100 opacity-0 transition-opacity group-hover:opacity-60"
+    ></div>
+
+    <!-- Widget options -->
+    <div
+      v-if="isAllowToShowOptions"
+      class="grid-widget-options absolute right-2 top-2 z-20 mb-2 cursor-pointer"
+      :class="{
+        'invisible group-hover:visible': !isAllowToEdit,
+      }"
+    >
+      <div
+        class="mb-1 flex size-[35px] items-center justify-center rounded-full border border-neutral-90 bg-neutral-100 shadow-neutral-shadow-round-1xl transition hover:scale-105"
+      >
+        <lukso-icon
+          :id="dropdownId"
+          name="dots"
+          size="medium"
+          class="p-2"
+        ></lukso-icon>
+      </div>
+      <lukso-dropdown
+        :trigger-id="dropdownId"
+        is-right
+        size="medium"
+        @on-change="handleDropdownChange"
+      >
+        <!-- Edit option -->
+        <lukso-dropdown-option
+          v-if="isAllowToEdit"
+          size="medium"
+          @click="handleEdit"
+        >
+          <lukso-icon name="edit" size="small"></lukso-icon>
+          {{ formatMessage('grid_widget_menu_edit') }}</lukso-dropdown-option
+        >
+
+        <!-- Move option -->
+        <lukso-dropdown-option
+          v-if="isAllowToEdit"
+          size="medium"
+          @click="handleMove"
+        >
+          <lukso-icon name="link-1" size="small"></lukso-icon>
+          {{ formatMessage('grid_widget_menu_move') }}</lukso-dropdown-option
+        >
+
+        <!-- Clone option -->
+        <lukso-dropdown-option
+          v-if="isAllowToClone"
+          size="medium"
+          @click="handleClone"
+          :is-disabled="
+            !browserSupportExtension && !isMobile ? true : undefined
+          "
+        >
+          <lukso-icon name="copy" size="small"></lukso-icon>
+          <span v-if="isViewingOwnProfile">
+            {{ formatMessage('grid_widget_menu_clone') }}
+          </span>
+          <span v-else>
+            {{ formatMessage('grid_widget_menu_clone_to_my_grid') }}
+          </span>
+        </lukso-dropdown-option>
+
+        <!-- Open in new tab option -->
+        <lukso-dropdown-option
+          v-if="isAllowToOpenInNewTab"
+          size="medium"
+          @click="handleOpenInTab"
+        >
+          <lukso-icon name="link-3" size="small"></lukso-icon>
+          {{
+            formatMessage('grid_widget_menu_open_in_new_tab')
+          }}</lukso-dropdown-option
+        >
+
+        <!-- Delete option -->
+        <lukso-dropdown-option
+          v-if="isAllowToEdit"
+          size="medium"
+          @click="handleDelete"
+          ><lukso-icon name="trash" size="small" color="red-65"></lukso-icon
+          ><span class="text-red-65">{{
+            formatMessage('grid_widget_menu_delete')
+          }}</span></lukso-dropdown-option
+        >
+      </lukso-dropdown>
+    </div>
+
+    <!-- Resize handle -->
+    <div
+      v-if="isAllowToEdit && !isMobile"
+      class="grid-widget-resize absolute bottom-2 right-2 z-10 mb-1 flex size-[35px] cursor-pointer items-center justify-center rounded-full border border-neutral-90 bg-neutral-100 opacity-0 shadow-neutral-shadow-round-1xl transition hover:scale-105 group-hover:opacity-100"
+    >
+      <lukso-icon
+        name="expand"
+        size="medium"
+        class="rotate-90 p-2"
+      ></lukso-icon>
+    </div>
+
+    <!-- Loaded component based on widget type -->
+    <component
+      v-if="widgetComponent && targetIsVisible"
+      :is="widgetComponent"
+      v-bind="widgetProperties"
+      :widget="widget"
+    ></component>
+  </div>
+</template>
diff --git a/domains/grid/components/GridWidgetAddContent.vue b/domains/grid/components/GridWidgetAddContent.vue
new file mode 100644
index 00000000..910293fd
--- /dev/null
+++ b/domains/grid/components/GridWidgetAddContent.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const { showModal } = useModal()
+const { formatMessage } = useIntl()
+const { isEditingGrid } = storeToRefs(useGridStore())
+const { gridsForTabs } = useGrid()
+
+const handleAddContent = async () => {
+  // we enable editing mode in case user has no grids yet but see add content placeholder
+  if (gridsForTabs.value.length === 1) {
+    isEditingGrid.value = true
+  }
+
+  await showModal<Partial<GridWidget>>({
+    template: 'AddGridWidget',
+  })
+}
+</script>
+
+<template>
+  <div
+    class="flex h-full cursor-pointer flex-col items-center justify-center overflow-hidden rounded-12 p-4 opacity-50 transition hover:opacity-100 hover:shadow-neutral-shadow-round"
+    :class="{ 'bg-dashed-border': true }"
+    @click="handleAddContent"
+  >
+    <lukso-icon name="plus" size="large" color="neutral-20"></lukso-icon>
+    <p class="mt-2">
+      {{ formatMessage('grid_widget_add_widget_text') }}
+    </p>
+  </div>
+</template>
diff --git a/domains/grid/components/GridWidgetElfsight.vue b/domains/grid/components/GridWidgetElfsight.vue
new file mode 100644
index 00000000..ffee1522
--- /dev/null
+++ b/domains/grid/components/GridWidgetElfsight.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+type Props = {
+  id: string
+}
+
+const props = defineProps<Props>()
+const embedId = ref('')
+
+watch(
+  () => props.id,
+  async () => {
+    embedId.value = ''
+    await nextTick()
+    const script = document.createElement('script')
+    script.src = 'https://static.elfsight.com/platform/platform.js'
+    script.async = true
+    script.defer = true
+
+    const existingScript = document.querySelector(`script[src="${script.src}"]`)
+
+    if (existingScript) {
+      existingScript.remove()
+    }
+
+    embedId.value = props.id
+    document.body.appendChild(script)
+  },
+  { immediate: true, deep: true }
+)
+</script>
+
+<template>
+  <div v-if="embedId" class="relative m-3 overflow-auto">
+    <div :class="`elfsight-app-${embedId}`" data-elfsight-app-lazy></div>
+  </div>
+</template>
diff --git a/domains/grid/components/GridWidgetIframe.vue b/domains/grid/components/GridWidgetIframe.vue
new file mode 100644
index 00000000..27d1efe6
--- /dev/null
+++ b/domains/grid/components/GridWidgetIframe.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { useDebounceFn, useResizeObserver } from '@vueuse/core'
+
+type Props = {
+  src: string
+  allow?: string
+  referrerpolicy?: IframeReferrerPolicy
+  allowfullscreen?: boolean
+  widget?: GridWidget
+}
+
+const props = defineProps<Props>()
+const embedSrc = ref(props.src)
+const iframeRef = ref<HTMLElement | null>(null)
+const isLoaded = ref(false)
+
+const handleLoad = () => {
+  isLoaded.value = true
+}
+
+const reloadIframe = () => {
+  embedSrc.value = ''
+  const onResize = useDebounceFn(() => {
+    embedSrc.value = props.src
+  }, 100)
+  onResize()
+}
+
+watch(
+  () => props.src,
+  () => {
+    reloadIframe()
+  }
+)
+
+useResizeObserver(iframeRef, useDebounceFn(reloadIframe, 100))
+</script>
+
+<template>
+  <div ref="iframeRef" class="relative h-full p-3">
+    <AppLoader
+      v-if="!isLoaded"
+      class="absolute left-[calc(50%-20px)] top-[calc(50%-20px)]"
+    />
+    <iframe
+      :src="embedSrc"
+      :allow="allow"
+      :referrerpolicy="referrerpolicy"
+      :allowfullscreen="allowfullscreen"
+      frameborder="0"
+      class="size-full overflow-hidden rounded-8"
+      @load="handleLoad"
+    >
+    </iframe>
+  </div>
+</template>
diff --git a/domains/grid/components/GridWidgetImages.vue b/domains/grid/components/GridWidgetImages.vue
new file mode 100644
index 00000000..bc54a204
--- /dev/null
+++ b/domains/grid/components/GridWidgetImages.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+type Props = {
+  images?: string[]
+  type: ImagesType
+}
+
+const props = defineProps<Props>()
+const { showModal } = useModal()
+
+// for now we support only single image
+const imageSrc = computed(() => {
+  return props.images?.[0]
+})
+
+const handleClick = (src?: string) => {
+  if (!src) {
+    return
+  }
+
+  showModal({
+    template: 'AssetImage',
+    data: {
+      image: {
+        url: src,
+      },
+    },
+    size: 'auto',
+  })
+}
+</script>
+
+<template>
+  <div class="m-3 flex h-full overflow-hidden rounded-8">
+    <lukso-image
+      :src="imageSrc"
+      :class="{
+        'cursor-pointer': !!imageSrc,
+      }"
+      class="min-h-full min-w-full"
+      alt="image"
+      @click="handleClick(imageSrc)"
+    ></lukso-image>
+  </div>
+</template>
diff --git a/domains/grid/components/GridWidgetInstagram.vue b/domains/grid/components/GridWidgetInstagram.vue
new file mode 100644
index 00000000..bc5fbd24
--- /dev/null
+++ b/domains/grid/components/GridWidgetInstagram.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { useScriptTag } from '@vueuse/core'
+
+type Props = {
+  src: string
+}
+
+const props = defineProps<Props>()
+const embedSrc = ref('')
+
+useScriptTag('https://www.instagram.com/embed.js', () => {}, {
+  async: true,
+  defer: true,
+})
+
+const processInstagramEmbeds = () => {
+  window.instgrm?.Embeds.process()
+}
+
+watch(
+  () => props.src,
+  async () => {
+    embedSrc.value = ''
+    await nextTick()
+    embedSrc.value = props.src
+    await nextTick()
+    processInstagramEmbeds()
+  },
+  { immediate: true, deep: true }
+)
+</script>
+
+<template>
+  <div v-if="embedSrc" class="relative m-3 overflow-auto">
+    <blockquote
+      class="instagram-media w-full !bg-transparent"
+      data-instgrm-captioned
+      :data-instgrm-permalink="embedSrc"
+      data-instgrm-version="14"
+    ></blockquote>
+  </div>
+</template>
diff --git a/domains/grid/components/GridWidgetSpotify.vue b/domains/grid/components/GridWidgetSpotify.vue
new file mode 100644
index 00000000..b5eeb641
--- /dev/null
+++ b/domains/grid/components/GridWidgetSpotify.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+type Props = {
+  src: string
+  allow: string
+  type?: string
+  widget: GridWidget
+}
+
+const SPOTIFY_LARGE_EMBED_HEIGHT_PX = 352
+
+const props = defineProps<Props>()
+
+const iframeHeight = computed(() => {
+  // for one row widget we use Spotify large (352px) embed, otherwise it resizes into small one (152px)
+  if (props.widget.h === 1) {
+    return SPOTIFY_LARGE_EMBED_HEIGHT_PX
+  }
+
+  return '100%'
+})
+</script>
+
+<template>
+  <div class="h-full p-3">
+    <div ref="wrapperRef" class="h-[inherit] overflow-scroll rounded-8">
+      <iframe
+        ref="iframeRef"
+        :src="src"
+        :allow="allow"
+        :height="iframeHeight"
+        width="100%"
+        loading="lazy"
+      ></iframe>
+    </div>
+  </div>
+</template>
diff --git a/domains/grid/components/GridWidgetText.vue b/domains/grid/components/GridWidgetText.vue
new file mode 100644
index 00000000..18e1b996
--- /dev/null
+++ b/domains/grid/components/GridWidgetText.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+type Props = {
+  title?: string
+  text?: string
+  backgroundColor?: string
+  titleColor?: string
+  textColor?: string
+  link?: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <a
+    class="m-3 flex h-full flex-col items-center justify-center overflow-hidden rounded-8 p-4 text-neutral-100"
+    :style="{ backgroundColor }"
+    :href="link"
+    target="_blank"
+  >
+    <h1
+      class="heading-apax-24-medium break-word"
+      :style="{
+        color: titleColor,
+      }"
+    >
+      {{ title }}
+    </h1>
+    <p
+      class="mt-2 whitespace-pre-line text-center text-16 break-word"
+      :style="{
+        color: textColor,
+      }"
+    >
+      {{ text }}
+    </p>
+  </a>
+</template>
diff --git a/domains/grid/components/GridWidgetX.vue b/domains/grid/components/GridWidgetX.vue
new file mode 100644
index 00000000..bf7659f6
--- /dev/null
+++ b/domains/grid/components/GridWidgetX.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+type Props = {
+  src: string
+  type?: XType
+  theme?: string
+  username?: string
+  id?: string
+  widget?: GridWidget
+}
+
+const props = defineProps<Props>()
+const embedSrc = ref('')
+
+// each change (add, edit) of the widget require to "reinstall" the twitter script
+watch(
+  () => props.src,
+  async () => {
+    embedSrc.value = ''
+    await nextTick()
+    const script = document.createElement('script')
+    script.src = 'https://platform.twitter.com/widgets.js'
+    script.async = true
+
+    const existingScript = document.querySelector(`script[src="${script.src}"]`)
+
+    if (existingScript) {
+      existingScript.remove()
+    }
+
+    embedSrc.value = props.src
+    document.body.appendChild(script)
+  },
+  { immediate: true, deep: true }
+)
+</script>
+
+<template>
+  <div v-if="embedSrc" class="m-3 h-full overflow-scroll">
+    <!-- X post -->
+    <div v-if="type === 'status'" class="my-[-10px] size-[inherit]">
+      <blockquote class="twitter-tweet size-[inherit]">
+        <a
+          class="flex size-[inherit] items-center justify-center"
+          :href="embedSrc"
+          ><AppLoader
+        /></a>
+      </blockquote>
+    </div>
+
+    <!-- X timeline -->
+    <a
+      v-else
+      class="twitter-timeline flex size-[inherit] items-center justify-center"
+      :href="embedSrc"
+    >
+      <AppLoader />
+    </a>
+  </div>
+</template>
diff --git a/domains/grid/components/__tests__/GridFloatingMenu.spec.ts b/domains/grid/components/__tests__/GridFloatingMenu.spec.ts
new file mode 100644
index 00000000..4007065d
--- /dev/null
+++ b/domains/grid/components/__tests__/GridFloatingMenu.spec.ts
@@ -0,0 +1,69 @@
+import { renderSuspended } from '@nuxt/test-utils/runtime'
+import { createTestingPinia } from '@pinia/testing'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import GridFloatingMenu from '../GridFloatingMenu.vue'
+
+vi.mock('/utils/getCurrentProfileAddress', () => ({
+  getCurrentProfileAddress: () => '0xcafebabe',
+}))
+
+describe('GridFloatingMenu', () => {
+  beforeEach(() => {
+    useIntl().setupIntl(defaultConfig)
+  })
+
+  it('should render when user is not connected', async () => {
+    const component = await renderSuspended(GridFloatingMenu)
+    expect(component.html()).toMatchSnapshot()
+  })
+
+  it('should render when user is connected', async () => {
+    const component = await renderSuspended(GridFloatingMenu, {
+      global: {
+        plugins: [
+          createTestingPinia({
+            initialState: {
+              app: { connectedProfileAddress: '0xcafebabe' },
+            },
+          }),
+        ],
+      },
+    })
+    expect(component.html()).toMatchSnapshot()
+  })
+
+  it('should render when edit mode is enabled', async () => {
+    const component = await renderSuspended(GridFloatingMenu, {
+      global: {
+        plugins: [
+          createTestingPinia({
+            initialState: {
+              app: { connectedProfileAddress: '0xcafebabe' },
+              grid: { isEditingGrid: true },
+            },
+          }),
+        ],
+      },
+    })
+
+    expect(component.html()).toMatchSnapshot()
+  })
+
+  it('should render when has unsaved changes', async () => {
+    const component = await renderSuspended(GridFloatingMenu, {
+      global: {
+        plugins: [
+          createTestingPinia({
+            initialState: {
+              app: { connectedProfileAddress: '0xcafebabe' },
+              grid: { isEditingGrid: true, hasUnsavedGrid: true },
+            },
+          }),
+        ],
+      },
+    })
+
+    expect(component.html()).toMatchSnapshot()
+  })
+})
diff --git a/domains/grid/components/__tests__/__snapshots__/GridFloatingMenu.spec.ts.snap b/domains/grid/components/__tests__/__snapshots__/GridFloatingMenu.spec.ts.snap
new file mode 100644
index 00000000..3cbe6680
--- /dev/null
+++ b/domains/grid/components/__tests__/__snapshots__/GridFloatingMenu.spec.ts.snap
@@ -0,0 +1,70 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`GridFloatingMenu > should render when edit mode is enabled 1`] = `
+"<div id="test-wrapper">
+  <div class="fixed z-50 flex animate-fade-in gap-6 overflow-hidden rounded-full bg-neutral-100 p-3 shadow-neutral-shadow-round duration-300 ease-in-out sm:bottom-10 sm:right-10 sm:flex-col sm:transition lg:right-[calc(50%-540px)] right-[calc(50%-160px)] h-[64px] w-[320px] sm:h-[320px] sm:w-[64px]" style="bottom: 40px; transition: all 0.3s ease-in-out;">
+    <div class="flex animate-fade-in gap-6 sm:flex-col">
+      <!-- Add widget  -->
+      <lukso-tooltip class="flex size-10 items-center justify-center rounded-full transition-all duration-300 bg-neutral-97 cursor-pointer hover:scale-105 hover:bg-neutral-95" text="Add new content" placement="left" offset="15" show-delay="1000">
+        <lukso-icon name="plus" color="purple-41"></lukso-icon>
+      </lukso-tooltip><!-- Add grid  -->
+      <lukso-tooltip class="flex size-10 items-center justify-center rounded-full transition-all duration-300 bg-neutral-97 cursor-pointer hover:scale-105 hover:bg-neutral-95" text="Add new grid" placement="left" offset="15" show-delay="1000">
+        <lukso-icon name="add-grid" color="purple-41"></lukso-icon>
+      </lukso-tooltip><!-- Reset  -->
+      <lukso-tooltip class="flex size-10 items-center justify-center rounded-full transition-all duration-300 bg-neutral-97" text="" placement="left" offset="15" show-delay="1000">
+        <lukso-icon name="reload" color="neutral-85" class="-rotate-90 transition"></lukso-icon>
+      </lukso-tooltip>
+    </div><!-- Edit mode toggle -->
+    <lukso-tooltip class="flex size-10 items-center justify-center rounded-full transition-all duration-300 bg-neutral-97 cursor-pointer hover:scale-105 hover:bg-neutral-95" text="Exit edit mode" placement="left" offset="15" show-delay="1000">
+      <lukso-icon name="close-lg" color="purple-41"></lukso-icon>
+    </lukso-tooltip><!-- Save  -->
+    <lukso-tooltip class="flex size-10 items-center justify-center rounded-full transition-all duration-300 bg-neutral-97" text="" placement="left" offset="15" show-delay="1000">
+      <lukso-icon name="tick" color="neutral-85" class=""></lukso-icon>
+    </lukso-tooltip>
+  </div>
+</div>"
+`;
+
+exports[`GridFloatingMenu > should render when has unsaved changes 1`] = `
+"<div id="test-wrapper">
+  <div class="fixed z-50 flex animate-fade-in gap-6 overflow-hidden rounded-full bg-neutral-100 p-3 shadow-neutral-shadow-round duration-300 ease-in-out sm:bottom-10 sm:right-10 sm:flex-col sm:transition lg:right-[calc(50%-540px)] right-[calc(50%-160px)] h-[64px] w-[320px] sm:h-[320px] sm:w-[64px]" style="bottom: 40px; transition: all 0.3s ease-in-out;">
+    <div class="flex animate-fade-in gap-6 sm:flex-col">
+      <!-- Add widget  -->
+      <lukso-tooltip class="flex size-10 items-center justify-center rounded-full transition-all duration-300 bg-neutral-97 cursor-pointer hover:scale-105 hover:bg-neutral-95" text="Add new content" placement="left" offset="15" show-delay="1000">
+        <lukso-icon name="plus" color="purple-41"></lukso-icon>
+      </lukso-tooltip><!-- Add grid  -->
+      <lukso-tooltip class="flex size-10 items-center justify-center rounded-full transition-all duration-300 bg-neutral-97 cursor-pointer hover:scale-105 hover:bg-neutral-95" text="Add new grid" placement="left" offset="15" show-delay="1000">
+        <lukso-icon name="add-grid" color="purple-41"></lukso-icon>
+      </lukso-tooltip><!-- Reset  -->
+      <lukso-tooltip class="flex size-10 items-center justify-center rounded-full transition-all duration-300 cursor-pointer bg-[#ffe0e0] hover:scale-105 hover:bg-[#ffd1d1]" text="Reset changes" placement="left" offset="15" show-delay="1000">
+        <lukso-icon name="reload" color="red-65" class="-rotate-90 transition"></lukso-icon>
+      </lukso-tooltip>
+    </div><!-- Edit mode toggle -->
+    <lukso-tooltip class="flex size-10 items-center justify-center rounded-full transition-all duration-300 bg-neutral-97 cursor-pointer hover:scale-105 hover:bg-neutral-95" text="Exit edit mode" placement="left" offset="15" show-delay="1000">
+      <lukso-icon name="close-lg" color="purple-41"></lukso-icon>
+    </lukso-tooltip><!-- Save  -->
+    <lukso-tooltip class="flex size-10 items-center justify-center rounded-full transition-all duration-300 cursor-pointer bg-[#E2FFEA] hover:scale-105 hover:bg-[#d6ffe2]" text="Save changes" placement="left" offset="15" show-delay="1000">
+      <lukso-icon name="tick" color="green-54" class=""></lukso-icon>
+    </lukso-tooltip>
+  </div>
+</div>"
+`;
+
+exports[`GridFloatingMenu > should render when user is connected 1`] = `
+"<div id="test-wrapper">
+  <div class="fixed z-50 flex animate-fade-in gap-6 overflow-hidden rounded-full bg-neutral-100 p-3 shadow-neutral-shadow-round duration-300 ease-in-out sm:bottom-10 sm:right-10 sm:flex-col sm:transition lg:right-[calc(50%-540px)] right-4 size-[64px]" style="bottom: 40px; transition: all 0.3s ease-in-out;">
+    <!--v-if-->
+    <!-- Edit mode toggle -->
+    <lukso-tooltip class="flex size-10 items-center justify-center rounded-full transition-all duration-300 bg-neutral-97 cursor-pointer hover:scale-105 hover:bg-neutral-95" text="Enable edit mode" placement="left" offset="15" show-delay="1000">
+      <lukso-icon name="edit" color="purple-41"></lukso-icon>
+    </lukso-tooltip><!-- Save  -->
+    <!--v-if-->
+  </div>
+</div>"
+`;
+
+exports[`GridFloatingMenu > should render when user is not connected 1`] = `
+"<div id="test-wrapper">
+  <!--v-if-->
+</div>"
+`;
diff --git a/domains/grid/composables/useForm.ts b/domains/grid/composables/useForm.ts
new file mode 100644
index 00000000..2eb3fe32
--- /dev/null
+++ b/domains/grid/composables/useForm.ts
@@ -0,0 +1,85 @@
+import { computedAsync } from '@vueuse/core'
+import { type ZodEffects, ZodError, type ZodObject } from 'zod'
+
+import type { SelectStringOption } from '@lukso/web-components'
+
+export const useForm = (
+  schema?: ZodObject<any> | ZodEffects<ZodObject<any>>,
+  initialValues: Record<string, unknown> = {}
+) => {
+  const inputValues = ref(initialValues)
+  const inputErrors = ref<Record<string, any> | undefined>()
+
+  const canSubmit = computedAsync(async () => {
+    try {
+      await schema?.parseAsync(inputValues.value)
+      return true
+    } catch (error: unknown) {
+      return false
+    }
+  }, false)
+
+  const getFieldErrorMessage = (field: string, index?: number) => {
+    if (index !== undefined) {
+      return inputErrors.value?.[field][index]?._errors[0]
+    }
+
+    return inputErrors.value?.[field]?._errors[0]
+  }
+
+  const handleFieldChange = (customEvent: CustomEvent, field: string) => {
+    const value = customEvent.detail?.value
+    inputValues.value[field] = value
+  }
+
+  const handleSelectChange = (customEvent: CustomEvent, field: string) => {
+    const option = customEvent.detail.value as SelectStringOption
+    inputValues.value[field] = Number.parseInt(option.id as string)
+  }
+
+  const handleArrayChange = (
+    customEvent: CustomEvent,
+    field: string,
+    index: number
+  ) => {
+    const value = customEvent.detail?.value
+
+    if (Array.isArray(inputValues.value[field])) {
+      ;(inputValues.value[field] as unknown[])[index] = value
+    }
+  }
+
+  const handleFormErrors = (error: unknown) => {
+    if (error instanceof ZodError) {
+      inputErrors.value = error?.format()
+    }
+  }
+
+  watch(
+    [inputValues],
+    async () => {
+      try {
+        inputErrors.value = undefined
+        await schema?.parseAsync(inputValues.value)
+      } catch (error: unknown) {
+        handleFormErrors(error)
+
+        if (gridLog.enabled) {
+          gridLog('Input error', error)
+        }
+      }
+    },
+    { deep: true }
+  )
+
+  return {
+    inputValues,
+    inputErrors,
+    canSubmit,
+    getFieldErrorMessage,
+    handleFieldChange,
+    handleFormErrors,
+    handleSelectChange,
+    handleArrayChange,
+  }
+}
diff --git a/domains/grid/composables/useGrid.ts b/domains/grid/composables/useGrid.ts
new file mode 100644
index 00000000..ab652bbe
--- /dev/null
+++ b/domains/grid/composables/useGrid.ts
@@ -0,0 +1,321 @@
+export const useGrid = () => {
+  const {
+    isConnected,
+    connectedProfileAddress,
+    isViewingOwnProfile,
+    isMobile,
+  } = storeToRefs(useAppStore())
+  const {
+    isEditingGrid,
+    hasUnsavedGrid,
+    viewedGrid,
+    tempGrid,
+    isSavingGrid,
+    selectedGridId,
+  } = storeToRefs(useGridStore())
+
+  const canEditGrid = computed(
+    () => isEditingGrid.value && isConnected.value && isViewingOwnProfile.value
+  )
+
+  const getGridById = (grid: Grid[], id?: string) =>
+    grid.find(item => item.id === id)
+
+  const getSelectedGridWidgets = (grid: Grid[]): GridWidget[] =>
+    getGridById(grid, selectedGridId.value)?.grid || []
+
+  const updateSelectedGrid = (gridWidgets: GridWidget[]): Grid[] => {
+    const updatedGrid = tempGrid.value.map(item => {
+      if (item.id === selectedGridId.value) {
+        return {
+          id: item.id,
+          title: item.title,
+          grid: gridWidgets,
+          gridColumns: item.gridColumns,
+        }
+      }
+
+      return item
+    })
+
+    return updatedGrid
+  }
+
+  const initSelectedGridId = () => {
+    const currentGrid = canEditGrid.value ? tempGrid.value : viewedGrid.value
+
+    if (
+      !selectedGridId.value ||
+      (selectedGridId.value &&
+        !currentGrid.some(item => item.id === selectedGridId.value))
+    ) {
+      selectedGridId.value = currentGrid[0]?.id
+    }
+  }
+
+  const gridsForDisplay = computed(() => {
+    const grids = canEditGrid.value
+      ? tempGrid.value
+      : viewedGrid.value.filter(grid => grid.grid.length > 0)
+
+    return grids.map(grid => {
+      return {
+        grid,
+      }
+    })
+  })
+
+  const gridsForTabs = computed(() => {
+    const grids =
+      isConnected.value && isViewingOwnProfile.value
+        ? tempGrid.value
+        : viewedGrid.value.filter(grid => grid.grid.length > 0)
+
+    return grids.map(grid => {
+      return {
+        grid,
+      }
+    })
+  })
+
+  return {
+    initializeGrid: async (
+      address?: Address,
+      withAddContentPlaceholder?: boolean
+    ) => {
+      let grid: Grid[] = []
+
+      if (!address) {
+        return []
+      }
+
+      // initialize user grid from the config stored in UP
+      const _initUserGrid = async () => {
+        const userGrid = await getUserGrid(address)
+        grid = buildGrid(userGrid, isMobile.value, withAddContentPlaceholder)
+
+        if (grid.length === 0) {
+          grid = cloneObject(EMPTY_GRID)
+        }
+
+        if (gridLog.enabled) {
+          gridLog('Initialize user grid', userGrid)
+        }
+
+        viewedGrid.value = cloneObject(grid)
+      }
+
+      // in case we don't have a temp grid yet we initialize it
+      const _initTempGrid = () => {
+        if (
+          tempGrid.value.length === 0 &&
+          viewedGrid.value.length !== 0 &&
+          isViewingOwnProfile.value
+        ) {
+          tempGrid.value = cloneObject(grid)
+        }
+      }
+
+      // in edit mode we initialize from temp grid
+      const _initEditMode = () => {
+        if (canEditGrid.value) {
+          grid = buildGrid(
+            tempGrid.value,
+            isMobile.value,
+            withAddContentPlaceholder
+          )
+
+          if (gridLog.enabled) {
+            gridLog('Initialize temp grid', grid)
+          }
+
+          tempGrid.value = cloneObject(grid)
+        }
+      }
+
+      await _initUserGrid()
+      _initTempGrid()
+      _initEditMode()
+      initSelectedGridId()
+    },
+
+    addGridWidget: (widget: GridWidgetWithoutCords, grid?: Grid) => {
+      if (!isConnected.value) {
+        console.warn('User not connected')
+        return
+      }
+
+      if (!grid) {
+        console.warn('Grid is required')
+        return
+      }
+
+      if (gridLog.enabled) {
+        gridLog('Add grid widget', widget)
+      }
+
+      // widget is added at the end and doesn't have x/y cords yet but findBestPosition algorithm will add them later
+      grid.grid.push(widget as GridWidget)
+    },
+
+    updateGridWidget: (id?: string, widget?: Partial<GridWidget>) => {
+      if (!isConnected.value) {
+        console.warn('User not connected')
+        return
+      }
+
+      if (!id) {
+        console.warn('Update requires an id')
+        return
+      }
+
+      const gridWidgets = getSelectedGridWidgets(tempGrid.value)
+      const widgetIndex = gridWidgets.findIndex(({ i }) => i === id)
+
+      if (widgetIndex === -1) {
+        console.warn('Widget not found', id)
+        return
+      }
+
+      gridWidgets[widgetIndex] = {
+        ...gridWidgets[widgetIndex],
+        ...widget,
+      }
+
+      if (gridLog.enabled) {
+        gridLog('Update grid widget', gridWidgets[widgetIndex])
+      }
+
+      tempGrid.value = updateSelectedGrid(gridWidgets)
+    },
+
+    removeGridWidget: (id: string | number) => {
+      if (!isConnected.value) {
+        console.warn('User not connected')
+        return
+      }
+
+      if (typeof id !== 'string' && typeof id !== 'number') {
+        return
+      }
+
+      if (gridLog.enabled) {
+        gridLog('Remove grid widget', id)
+      }
+
+      tempGrid.value = updateSelectedGrid(
+        getSelectedGridWidgets(tempGrid.value).filter(item => item.i !== id)
+      )
+    },
+
+    saveGrid: async (grid?: Grid[]) => {
+      if (!canEditGrid.value) {
+        console.warn('User cannot edit grid')
+        return
+      }
+
+      if (!grid || !connectedProfileAddress.value) {
+        return
+      }
+
+      const config = gridToConfig(grid)
+      const validation = await gridConfigSchema.array().safeParseAsync(config)
+
+      if (!validation.success) {
+        console.warn('Invalid schema', validation.error)
+        return
+      }
+
+      try {
+        isSavingGrid.value = true
+        return (await saveConfig(connectedProfileAddress.value, config))
+          ?.send({ from: connectedProfileAddress.value })
+          ?.on('transactionHash', (_hash: string) => {
+            // as soon as user confirm we unblock the UI
+            hasUnsavedGrid.value = false
+            isSavingGrid.value = false
+            isEditingGrid.value = false
+
+            // rebuild grid to ensure that all widgets are in the correct position
+            const grid = buildGrid(
+              tempGrid.value,
+              isMobile.value,
+              canEditGrid.value
+            )
+
+            tempGrid.value = cloneObject(grid)
+            viewedGrid.value = cloneObject(grid)
+          })
+
+          ?.on('receipt', (receipt: any) => {
+            if (gridLog.enabled) {
+              gridLog('Grid saved', toRaw(grid), receipt)
+            }
+          })
+          ?.on('error', (error: Error) => {
+            console.warn(error)
+            isSavingGrid.value = false
+          })
+      } catch (error) {
+        console.warn('Error saving grid', error)
+        isSavingGrid.value = false
+      }
+    },
+
+    addGrid: (grid: Grid) => {
+      if (!isConnected.value) {
+        console.warn('User not connected')
+        return
+      }
+
+      tempGrid.value.push(grid)
+    },
+
+    updateGrid: (id?: string, grid?: Partial<Grid>) => {
+      if (!isConnected.value) {
+        console.warn('User not connected')
+        return
+      }
+
+      if (!id) {
+        console.warn('Grid update requires an id')
+        return
+      }
+
+      if (!grid?.title) {
+        console.warn('Grid update requires a title')
+        return
+      }
+
+      const index = tempGrid.value.findIndex(item => item.id === id)
+
+      if (index === -1) {
+        console.warn('Grid not found', id)
+        return
+      }
+
+      tempGrid.value[index] = {
+        ...tempGrid.value[index],
+        ...{
+          ...grid,
+        },
+      }
+    },
+
+    removeGrid: (id: string) => {
+      if (!isConnected.value) {
+        console.warn('User not connected')
+        return
+      }
+
+      tempGrid.value = tempGrid.value.filter(item => item.id !== id)
+    },
+    getSelectedGridWidgets,
+    updateSelectedGrid,
+    canEditGrid,
+    initSelectedGridId,
+    getGridById,
+    gridsForDisplay,
+    gridsForTabs,
+  }
+}
diff --git a/domains/grid/nuxt.config.ts b/domains/grid/nuxt.config.ts
new file mode 100644
index 00000000..cb6fec64
--- /dev/null
+++ b/domains/grid/nuxt.config.ts
@@ -0,0 +1,4 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  routeRules: {},
+})
diff --git a/domains/grid/platform-builder/__tests__/instagramBuilder.spec.ts b/domains/grid/platform-builder/__tests__/instagramBuilder.spec.ts
new file mode 100644
index 00000000..e3218089
--- /dev/null
+++ b/domains/grid/platform-builder/__tests__/instagramBuilder.spec.ts
@@ -0,0 +1,43 @@
+import { describe, expect, it } from 'vitest'
+
+import { instagramBuilder } from '../instagramBuilder'
+
+describe('instagramBuilder', () => {
+  it('should return the correct URL for a valid type and id', () => {
+    const properties = {
+      id: '12345',
+      type: instagramType.enum.p,
+    }
+    const result = instagramBuilder(properties)
+    expect(result.src).toBe('https://www.instagram.com/p/12345')
+  })
+
+  it('should return an empty string when id is missing', () => {
+    const properties = {
+      id: '',
+      type: instagramType.enum.p,
+    }
+    const result = instagramBuilder(properties)
+    expect(result.src).toBe('')
+  })
+
+  it('should return an empty string when type is missing', () => {
+    const properties = {
+      id: '12345',
+      type: '',
+    }
+    // @ts-expect-error
+    const result = instagramBuilder(properties)
+    expect(result.src).toBe('')
+  })
+
+  it('should return an empty string when both id and type are missing', () => {
+    const properties = {
+      id: '',
+      type: '',
+    }
+    // @ts-expect-error
+    const result = instagramBuilder(properties)
+    expect(result.src).toBe('')
+  })
+})
diff --git a/domains/grid/platform-builder/__tests__/xBuilder.spec.ts b/domains/grid/platform-builder/__tests__/xBuilder.spec.ts
new file mode 100644
index 00000000..bb5d048c
--- /dev/null
+++ b/domains/grid/platform-builder/__tests__/xBuilder.spec.ts
@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest'
+
+import { xBuilder } from '../xBuilder'
+
+describe('xBuilder', () => {
+  it('should return the correct URL for a timeline type', () => {
+    const properties = {
+      id: '',
+      username: 'testuser',
+      type: xType.enum.timeline,
+    }
+    const result = xBuilder(properties)
+    expect(result.src).toBe('https://twitter.com/testuser')
+  })
+
+  it('should return the correct URL for a status type with an id', () => {
+    const properties = {
+      id: '12345',
+      username: 'testuser',
+      type: xType.enum.status,
+    }
+    const result = xBuilder(properties)
+    expect(result.src).toBe('https://twitter.com/testuser/status/12345')
+  })
+
+  it('should return an empty string for an unknown type without an id', () => {
+    const properties = {
+      id: '',
+      username: 'testuser',
+      type: 'unknown',
+    }
+
+    // @ts-expect-error
+    const result = xBuilder(properties)
+    expect(result.src).toBe('')
+  })
+
+  it('should return the correct URL for a status when type is unknown and with an id', () => {
+    const properties = {
+      id: '12345',
+      username: 'testuser',
+      type: 'unknown',
+    }
+    // @ts-expect-error
+    const result = xBuilder(properties)
+    expect(result.src).toBe('https://twitter.com/testuser/status/12345')
+  })
+})
diff --git a/domains/grid/platform-builder/instagramBuilder.ts b/domains/grid/platform-builder/instagramBuilder.ts
new file mode 100644
index 00000000..b33f1bff
--- /dev/null
+++ b/domains/grid/platform-builder/instagramBuilder.ts
@@ -0,0 +1,11 @@
+export const instagramBuilder = (properties: InstagramWidgetProperties) => {
+  let src = ''
+  const { id, type } = properties
+
+  if (id && type) {
+    src = `https://www.instagram.com/${type}/${id}`
+  }
+  return {
+    src,
+  }
+}
diff --git a/domains/grid/platform-builder/platformBuilder.ts b/domains/grid/platform-builder/platformBuilder.ts
new file mode 100644
index 00000000..0aa3817d
--- /dev/null
+++ b/domains/grid/platform-builder/platformBuilder.ts
@@ -0,0 +1,16 @@
+export const buildPlatformOutput = async (
+  type: GridWidgetType,
+  properties: GridWidgetProperties
+) => {
+  switch (type) {
+    case GRID_WIDGET_TYPE.enum.X:
+      return xBuilder(properties as XWidgetProperties)
+    case GRID_WIDGET_TYPE.enum.INSTAGRAM:
+      return instagramBuilder(properties as InstagramWidgetProperties)
+
+    default:
+      return {
+        src: '',
+      }
+  }
+}
diff --git a/domains/grid/platform-builder/xBuilder.ts b/domains/grid/platform-builder/xBuilder.ts
new file mode 100644
index 00000000..254aeb17
--- /dev/null
+++ b/domains/grid/platform-builder/xBuilder.ts
@@ -0,0 +1,18 @@
+export const xBuilder = (
+  properties: XWidgetProperties
+): {
+  src: string
+} => {
+  let src = ''
+  const { id, username, type } = properties
+
+  if (type === 'timeline') {
+    src = `https://twitter.com/${username}`
+  } else if (id) {
+    src = `https://twitter.com/${username}/status/${id}`
+  }
+
+  return {
+    src,
+  }
+}
diff --git a/domains/grid/platform-parser/__tests__/elfsightParser.spec.ts b/domains/grid/platform-parser/__tests__/elfsightParser.spec.ts
new file mode 100644
index 00000000..0baadbc1
--- /dev/null
+++ b/domains/grid/platform-parser/__tests__/elfsightParser.spec.ts
@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest'
+
+describe('Elfsight Input Parser', () => {
+  it.each([
+    [
+      'Embed code',
+      GRID_WIDGET_TYPE.enum.ELFSIGHT,
+      '<script src="https://static.elfsight.com/platform/platform.js" async></script><div class="elfsight-app-8473218e-6c60-4958-a6a7-b8c6065e1528" data-elfsight-app-lazy></div>',
+      {
+        widgetType: 'ELFSIGHT',
+        id: '8473218e-6c60-4958-a6a7-b8c6065e1528',
+      },
+    ],
+    [
+      'Class name',
+      GRID_WIDGET_TYPE.enum.ELFSIGHT,
+      'elfsight-app-8473218e-6c60-4958-a6a7-b8c6065e1528',
+      {
+        widgetType: 'ELFSIGHT',
+        id: '8473218e-6c60-4958-a6a7-b8c6065e1528',
+      },
+    ],
+    [
+      'UUID',
+      GRID_WIDGET_TYPE.enum.ELFSIGHT,
+      '8473218e-6c60-4958-a6a7-b8c6065e1528',
+      {
+        widgetType: 'ELFSIGHT',
+        id: '8473218e-6c60-4958-a6a7-b8c6065e1528',
+      },
+    ],
+  ])('correctly parses %s', async (_description, platform, input, expected) => {
+    const result = await parsePlatformInput(platform, input)
+    expect(result).toEqual(expected)
+  })
+})
diff --git a/domains/grid/platform-parser/__tests__/instagramParser.spec.ts b/domains/grid/platform-parser/__tests__/instagramParser.spec.ts
new file mode 100644
index 00000000..40ca674b
--- /dev/null
+++ b/domains/grid/platform-parser/__tests__/instagramParser.spec.ts
@@ -0,0 +1,95 @@
+import { describe, expect, it } from 'vitest'
+
+describe('Instagram Parser', () => {
+  describe('Instagram post', () => {
+    it('can parse into Instagram post from post URL without params', async () => {
+      const input = 'https://www.instagram.com/p/C98OXs6yhAq'
+      const result = await parsePlatformInput(
+        GRID_WIDGET_TYPE.Enum.INSTAGRAM,
+        input
+      )
+
+      expect(result).toEqual({
+        widgetType: 'INSTAGRAM',
+        type: 'p',
+        id: 'C98OXs6yhAq',
+      })
+    })
+
+    it('can parse into Instagram post from post URL with params', async () => {
+      const input =
+        'https://www.instagram.com/p/C98OXs6yhAq/?utm_source=ig_embed&amp;utm_campaign=loading'
+      const result = await parsePlatformInput(
+        GRID_WIDGET_TYPE.Enum.INSTAGRAM,
+        input
+      )
+
+      expect(result).toEqual({
+        widgetType: 'INSTAGRAM',
+        type: 'p',
+        id: 'C98OXs6yhAq',
+      })
+    })
+
+    it('can parse into Instagram post from post embed code', async () => {
+      const input =
+        '<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/C98OXs6yhAq/?utm_source=ig_embed&amp;utm_campaign=loading" data-instgrm-version="14" style=" background: #fff; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5), 0 1px 10px 0 rgba(0, 0, 0, 0.15); margin: 1px; max-width: 540px; min-width: 326px; padding: 0; width: 99.375%; width: -webkit-calc(100% - 2px); width: calc(100% - 2px); "> <div style="padding: 16px"> <a href="https://www.instagram.com/p/C98OXs6yhAq/?utm_source=ig_embed&amp;utm_campaign=loading" style=" background: #ffffff; line-height: 0; padding: 0 0; text-align: center; text-decoration: none; width: 100%; " target="_blank" > <div style=" display: flex; flex-direction: column; flex-grow: 1; justify-content: center; margin-bottom: 24px; " > <div style=" background-color: #f4f4f4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 224px; " ></div></div ></a> <p style=" color: #c9c8cd; font-family: Arial, sans-serif; font-size: 14px; line-height: 17px; margin-bottom: 0; margin-top: 8px; overflow: hidden; padding: 8px 0 7px; text-align: center; text-overflow: ellipsis; white-space: nowrap; " > <a href="https://www.instagram.com/p/C98OXs6yhAq/?utm_source=ig_embed&amp;utm_campaign=loading" style=" color: #c9c8cd; font-family: Arial, sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none; " target="_blank" >A post shared by Red Hot Chili Peppers (@chilipeppers)</a > </p> </div></blockquote><script async src="//www.instagram.com/embed.js"></script>'
+      const result = await parsePlatformInput(
+        GRID_WIDGET_TYPE.Enum.INSTAGRAM,
+        input
+      )
+
+      expect(result).toEqual({
+        widgetType: 'INSTAGRAM',
+        type: 'p',
+        id: 'C98OXs6yhAq',
+      })
+    })
+  })
+
+  describe('Instagram reel', () => {
+    it('can parse into Instagram reel from reel URL without params', async () => {
+      const input = 'https://www.instagram.com/reel/DAlOgHkuyxd'
+      const result = await parsePlatformInput(
+        GRID_WIDGET_TYPE.Enum.INSTAGRAM,
+        input
+      )
+
+      expect(result).toEqual({
+        widgetType: 'INSTAGRAM',
+        type: 'reel',
+        id: 'DAlOgHkuyxd',
+      })
+    })
+
+    it('can parse into Instagram reel from reel URL with params', async () => {
+      const input =
+        'https://www.instagram.com/reel/DAlOgHkuyxd/?utm_source=ig_embed&amp;utm_campaign=loading'
+      const result = await parsePlatformInput(
+        GRID_WIDGET_TYPE.Enum.INSTAGRAM,
+        input
+      )
+
+      expect(result).toEqual({
+        widgetType: 'INSTAGRAM',
+        type: 'reel',
+        id: 'DAlOgHkuyxd',
+      })
+    })
+
+    it('can parse into Instagram reel from reel embed code', async () => {
+      const input =
+        '<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/reel/DAlOgHkuyxd/?utm_source=ig_embed&amp;utm_campaign=loading" data-instgrm-version="14" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:16px;"> <a href="https://www.instagram.com/reel/DAlOgHkuyxd/?utm_source=ig_embed&amp;utm_campaign=loading" style=" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank"> <div style=" display: flex; flex-direction: row; align-items: center;"> <div style="background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;"></div> <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center;"> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;"></div> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;"></div></div></div><div style="padding: 19% 0;"></div> <div style="display:block; height:50px; margin:0 auto 12px; width:50px;"><svg width="50px" height="50px" viewBox="0 0 60 60" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-511.000000, -20.000000)" fill="#000000"><g><path d="M556.869,30.41 C554.814,30.41 553.148,32.076 553.148,34.131 C553.148,36.186 554.814,37.852 556.869,37.852 C558.924,37.852 560.59,36.186 560.59,34.131 C560.59,32.076 558.924,30.41 556.869,30.41 M541,60.657 C535.114,60.657 530.342,55.887 530.342,50 C530.342,44.114 535.114,39.342 541,39.342 C546.887,39.342 551.658,44.114 551.658,50 C551.658,55.887 546.887,60.657 541,60.657 M541,33.886 C532.1,33.886 524.886,41.1 524.886,50 C524.886,58.899 532.1,66.113 541,66.113 C549.9,66.113 557.115,58.899 557.115,50 C557.115,41.1 549.9,33.886 541,33.886 M565.378,62.101 C565.244,65.022 564.756,66.606 564.346,67.663 C563.803,69.06 563.154,70.057 562.106,71.106 C561.058,72.155 560.06,72.803 558.662,73.347 C557.607,73.757 556.021,74.244 553.102,74.378 C549.944,74.521 548.997,74.552 541,74.552 C533.003,74.552 532.056,74.521 528.898,74.378 C525.979,74.244 524.393,73.757 523.338,73.347 C521.94,72.803 520.942,72.155 519.894,71.106 C518.846,70.057 518.197,69.06 517.654,67.663 C517.244,66.606 516.755,65.022 516.623,62.101 C516.479,58.943 516.448,57.996 516.448,50 C516.448,42.003 516.479,41.056 516.623,37.899 C516.755,34.978 517.244,33.391 517.654,32.338 C518.197,30.938 518.846,29.942 519.894,28.894 C520.942,27.846 521.94,27.196 523.338,26.654 C524.393,26.244 525.979,25.756 528.898,25.623 C532.057,25.479 533.004,25.448 541,25.448 C548.997,25.448 549.943,25.479 553.102,25.623 C556.021,25.756 557.607,26.244 558.662,26.654 C560.06,27.196 561.058,27.846 562.106,28.894 C563.154,29.942 563.803,30.938 564.346,32.338 C564.756,33.391 565.244,34.978 565.378,37.899 C565.522,41.056 565.552,42.003 565.552,50 C565.552,57.996 565.522,58.943 565.378,62.101 M570.82,37.631 C570.674,34.438 570.167,32.258 569.425,30.349 C568.659,28.377 567.633,26.702 565.965,25.035 C564.297,23.368 562.623,22.342 560.652,21.575 C558.743,20.834 556.562,20.326 553.369,20.18 C550.169,20.033 549.148,20 541,20 C532.853,20 531.831,20.033 528.631,20.18 C525.438,20.326 523.257,20.834 521.349,21.575 C519.376,22.342 517.703,23.368 516.035,25.035 C514.368,26.702 513.342,28.377 512.574,30.349 C511.834,32.258 511.326,34.438 511.181,37.631 C511.035,40.831 511,41.851 511,50 C511,58.147 511.035,59.17 511.181,62.369 C511.326,65.562 511.834,67.743 512.574,69.651 C513.342,71.625 514.368,73.296 516.035,74.965 C517.703,76.634 519.376,77.658 521.349,78.425 C523.257,79.167 525.438,79.673 528.631,79.82 C531.831,79.965 532.853,80.001 541,80.001 C549.148,80.001 550.169,79.965 553.369,79.82 C556.562,79.673 558.743,79.167 560.652,78.425 C562.623,77.658 564.297,76.634 565.965,74.965 C567.633,73.296 568.659,71.625 569.425,69.651 C570.167,67.743 570.674,65.562 570.82,62.369 C570.966,59.17 571,58.147 571,50 C571,41.851 570.966,40.831 570.82,37.631"></path></g></g></g></svg></div><div style="padding-top: 8px;"> <div style=" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;">View this post on Instagram</div></div><div style="padding: 12.5% 0;"></div> <div style="display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;"><div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);"></div> <div style="background-color: #F4F4F4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;"></div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);"></div></div><div style="margin-left: 8px;"> <div style=" background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;"></div> <div style=" width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg)"></div></div><div style="margin-left: auto;"> <div style=" width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);"></div> <div style=" background-color: #F4F4F4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);"></div> <div style=" width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);"></div></div></div> <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center; margin-bottom: 24px;"> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 224px;"></div> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 144px;"></div></div></a><p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;"><a href="https://www.instagram.com/reel/DAlOgHkuyxd/?utm_source=ig_embed&amp;utm_campaign=loading" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none;" target="_blank">A post shared by memes (@uncrustable.memess)</a></p></div></blockquote><script async src="//www.instagram.com/embed.js"></script>'
+      const result = await parsePlatformInput(
+        GRID_WIDGET_TYPE.Enum.INSTAGRAM,
+        input
+      )
+
+      expect(result).toEqual({
+        widgetType: 'INSTAGRAM',
+        type: 'reel',
+        id: 'DAlOgHkuyxd',
+      })
+    })
+  })
+})
diff --git a/domains/grid/platform-parser/__tests__/soundcloudParser.spec.ts b/domains/grid/platform-parser/__tests__/soundcloudParser.spec.ts
new file mode 100644
index 00000000..12d81e63
--- /dev/null
+++ b/domains/grid/platform-parser/__tests__/soundcloudParser.spec.ts
@@ -0,0 +1,87 @@
+import { describe, expect, it } from 'vitest'
+
+describe('SOUNDCLOUD Input Parser', () => {
+  it.each([
+    [
+      'Track Share URL',
+      GRID_WIDGET_TYPE.enum.SOUNDCLOUD,
+      'https://soundcloud.com/occams-laser/with-you',
+      {
+        widgetType: 'IFRAME',
+        allow:
+          'autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture',
+        height: '166',
+        src: 'https://w.soundcloud.com/player/?url=https://soundcloud.com/occams-laser/with-you',
+        width: '100%',
+      },
+    ],
+    [
+      'Set Share URL',
+      GRID_WIDGET_TYPE.enum.SOUNDCLOUD,
+      'https://w.soundcloud.com/player/?visual=true&url=https%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F505007376&show_artwork=true',
+      {
+        widgetType: 'IFRAME',
+        allow:
+          'autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture',
+        height: '166',
+        src: 'https://w.soundcloud.com/player/?url=https://api.soundcloud.com/playlists/505007376&show_artwork=true',
+        width: '100%',
+      },
+    ],
+    [
+      'Users Embed Code',
+      GRID_WIDGET_TYPE.enum.SOUNDCLOUD,
+      'https://soundcloud.com/fabian-vogelsteller',
+      {
+        widgetType: 'IFRAME',
+        allow:
+          'autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture',
+        height: '166',
+        src: 'https://w.soundcloud.com/player/?url=https://soundcloud.com/fabian-vogelsteller',
+        width: '100%',
+      },
+    ],
+    [
+      'Track Embed Code',
+      GRID_WIDGET_TYPE.enum.SOUNDCLOUD,
+      '<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/1856391039&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/occams-laser" title="Occams Laser" target="_blank" style="color: #cccccc; text-decoration: none;">Occams Laser</a> · <a href="https://soundcloud.com/occams-laser/with-you" title="With You" target="_blank" style="color: #cccccc; text-decoration: none;">With You</a></div>',
+      {
+        widgetType: 'IFRAME',
+        allow: 'autoplay',
+        height: '300',
+        src: 'https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/1856391039&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true',
+        style: 'color: #cccccc; text-decoration: none;',
+        width: '100%',
+      },
+    ],
+    [
+      'Track Embed Code with URL encoded characters',
+      GRID_WIDGET_TYPE.enum.SOUNDCLOUD,
+      '<iframe width="100%" height="400" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?visual=true&url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F1856391039&show_artwork=true"></iframe>',
+      {
+        widgetType: 'IFRAME',
+        allow:
+          'autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture',
+        height: '400',
+        src: 'https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/1856391039&show_artwork=true',
+        width: '100%',
+      },
+    ],
+    [
+      'Playlist Embed Code',
+      GRID_WIDGET_TYPE.enum.SOUNDCLOUD,
+      '<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https://api.soundcloud.com/playlists/1850298147&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/vaporwavearchive" title="vaporwave archive" target="_blank" style="color: #cccccc; text-decoration: none;">vaporwave archive</a> · <a href="https://soundcloud.com/vaporwavearchive/sets/middle-mgmt-its-easy-to-talk" title="Middle Mgmt - 夏を語るは易し // it&#x27;s easy to talk about summer" target="_blank" style="color: #cccccc; text-decoration: none;">Middle Mgmt - 夏を語るは易し // it&#x27;s easy to talk about summer</a></div>',
+      {
+        widgetType: 'IFRAME',
+        allow: 'autoplay',
+        height: '300',
+        src: 'https://w.soundcloud.com/player/?url=https://api.soundcloud.com/playlists/1850298147&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true',
+        style: 'color: #cccccc; text-decoration: none;',
+        width: '100%',
+      },
+    ],
+  ])('correctly parses %s', async (_description, platform, input, expected) => {
+    const result = await parsePlatformInput(platform, input)
+    expect(result).toEqual(expected)
+  })
+})
diff --git a/domains/grid/platform-parser/__tests__/spotifyParser.spec.ts b/domains/grid/platform-parser/__tests__/spotifyParser.spec.ts
new file mode 100644
index 00000000..a86c374b
--- /dev/null
+++ b/domains/grid/platform-parser/__tests__/spotifyParser.spec.ts
@@ -0,0 +1,110 @@
+import { describe, expect, it } from 'vitest'
+
+describe('SPOTIFY Input Parser', () => {
+  it.each([
+    [
+      'Track URL',
+      GRID_WIDGET_TYPE.enum.SPOTIFY,
+      'https://open.spotify.com/track/7xGfFoTpQ2E7fRF5lN10tr',
+      {
+        widgetType: 'IFRAME',
+        src: 'https://open.spotify.com/embed/track/7xGfFoTpQ2E7fRF5lN10tr',
+        allow:
+          'clipboard-write; encrypted-media; fullscreen; picture-in-picture',
+      },
+    ],
+    [
+      'Track Embed Code',
+      GRID_WIDGET_TYPE.enum.SPOTIFY,
+      '<iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/2BHj31ufdEqVK5CkYDp9mA?utm_source=generator" width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>',
+      {
+        widgetType: 'IFRAME',
+        src: 'https://open.spotify.com/embed/track/2BHj31ufdEqVK5CkYDp9mA?utm_source=generator',
+        allow:
+          'autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture',
+        style: 'border-radius:12px',
+        width: '100%',
+        allowfullscreen: true,
+        frameBorder: 0,
+        height: '352',
+        loading: 'lazy',
+      },
+    ],
+    [
+      'Track Embed Code with theme',
+      GRID_WIDGET_TYPE.enum.SPOTIFY,
+      '<iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/48K735Rd3UQExzjXH004k1?utm_source=generator&theme=0" width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>',
+      {
+        widgetType: 'IFRAME',
+        src: 'https://open.spotify.com/embed/track/48K735Rd3UQExzjXH004k1?utm_source=generator&theme=0',
+        allow:
+          'autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture',
+        allowfullscreen: true,
+        frameBorder: 0,
+        height: '352',
+        loading: 'lazy',
+        style: 'border-radius:12px',
+        width: '100%',
+      },
+    ],
+    [
+      'Playlist URL',
+      GRID_WIDGET_TYPE.enum.SPOTIFY,
+      'https://open.spotify.com/playlist/7KFoK4LJ23EncELJwYmTDG',
+      {
+        widgetType: 'IFRAME',
+        src: 'https://open.spotify.com/embed/playlist/7KFoK4LJ23EncELJwYmTDG',
+        allow:
+          'clipboard-write; encrypted-media; fullscreen; picture-in-picture',
+      },
+    ],
+    [
+      'Playlist Embed Code',
+      GRID_WIDGET_TYPE.enum.SPOTIFY,
+      '<iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/7KFoK4LJ23EncELJwYmTDG?utm_source=generator" width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>',
+      {
+        widgetType: 'IFRAME',
+        src: 'https://open.spotify.com/embed/playlist/7KFoK4LJ23EncELJwYmTDG?utm_source=generator',
+        allow:
+          'autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture',
+        allowfullscreen: true,
+        frameBorder: 0,
+        height: '352',
+        loading: 'lazy',
+        style: 'border-radius:12px',
+        width: '100%',
+      },
+    ],
+    [
+      'Artist URL',
+      GRID_WIDGET_TYPE.enum.SPOTIFY,
+      'https://open.spotify.com/artist/4KY9rCrokaoFzvMfX98u1q',
+      {
+        widgetType: 'IFRAME',
+        src: 'https://open.spotify.com/embed/artist/4KY9rCrokaoFzvMfX98u1q',
+        allow:
+          'clipboard-write; encrypted-media; fullscreen; picture-in-picture',
+      },
+    ],
+    [
+      'Artist Embed Code',
+      GRID_WIDGET_TYPE.enum.SPOTIFY,
+      '<iframe style="border-radius:12px" src="https://open.spotify.com/embed/artist/4KY9rCrokaoFzvMfX98u1q?utm_source=generator" width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>',
+      {
+        widgetType: 'IFRAME',
+        src: 'https://open.spotify.com/embed/artist/4KY9rCrokaoFzvMfX98u1q?utm_source=generator',
+        allow:
+          'autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture',
+        allowfullscreen: true,
+        frameBorder: 0,
+        height: '352',
+        loading: 'lazy',
+        style: 'border-radius:12px',
+        width: '100%',
+      },
+    ],
+  ])('correctly parses %s', async (_description, platform, input, expected) => {
+    const result = await parsePlatformInput(platform, input)
+    expect(result).toEqual(expected)
+  })
+})
diff --git a/domains/grid/platform-parser/__tests__/warpcastParser.spec.ts b/domains/grid/platform-parser/__tests__/warpcastParser.spec.ts
new file mode 100644
index 00000000..331072ba
--- /dev/null
+++ b/domains/grid/platform-parser/__tests__/warpcastParser.spec.ts
@@ -0,0 +1,75 @@
+import { describe, expect, it } from 'vitest'
+
+describe('Warpcast Parser', () => {
+  it.each([
+    [
+      'can parse from profile URL',
+      GRID_WIDGET_TYPE.Enum.WARPCAST,
+      'https://warpcast.com/realfeindura',
+      {
+        widgetType: 'IFRAME',
+        src: 'https://warpcast.com/realfeindura',
+        allow:
+          'clipboard-write; encrypted-media; fullscreen; picture-in-picture',
+      },
+    ],
+    [
+      'can parse from post URL',
+      GRID_WIDGET_TYPE.Enum.WARPCAST,
+      'https://warpcast.com/realfeindura/0x0952bbc3',
+      {
+        widgetType: 'IFRAME',
+        src: 'https://warpcast.com/realfeindura/0x0952bbc3',
+        allow:
+          'clipboard-write; encrypted-media; fullscreen; picture-in-picture',
+      },
+    ],
+    [
+      'can parse username with @',
+      GRID_WIDGET_TYPE.Enum.WARPCAST,
+      '@realfeindura',
+      {
+        widgetType: 'IFRAME',
+        src: 'https://warpcast.com/realfeindura',
+        allow:
+          'clipboard-write; encrypted-media; fullscreen; picture-in-picture',
+      },
+    ],
+    [
+      'can parse username without @',
+      GRID_WIDGET_TYPE.Enum.WARPCAST,
+      'realfeindura',
+      {
+        widgetType: 'IFRAME',
+        src: 'https://warpcast.com/realfeindura',
+        allow:
+          'clipboard-write; encrypted-media; fullscreen; picture-in-picture',
+      },
+    ],
+    [
+      'can parse username without @ and post id',
+      GRID_WIDGET_TYPE.Enum.WARPCAST,
+      'realfeindura/0x0952bbc3',
+      {
+        widgetType: 'IFRAME',
+        src: 'https://warpcast.com/realfeindura/0x0952bbc3',
+        allow:
+          'clipboard-write; encrypted-media; fullscreen; picture-in-picture',
+      },
+    ],
+    [
+      'can parse username with @ and post id',
+      GRID_WIDGET_TYPE.Enum.WARPCAST,
+      '@realfeindura/0x0952bbc3',
+      {
+        widgetType: 'IFRAME',
+        src: 'https://warpcast.com/realfeindura/0x0952bbc3',
+        allow:
+          'clipboard-write; encrypted-media; fullscreen; picture-in-picture',
+      },
+    ],
+  ])('%s', async (_, widgetType, input, expected) => {
+    const result = await parsePlatformInput(widgetType, input)
+    expect(result).toEqual(expected)
+  })
+})
diff --git a/domains/grid/platform-parser/__tests__/xParser.spec.ts b/domains/grid/platform-parser/__tests__/xParser.spec.ts
new file mode 100644
index 00000000..841bbed9
--- /dev/null
+++ b/domains/grid/platform-parser/__tests__/xParser.spec.ts
@@ -0,0 +1,118 @@
+import { describe, expect, it } from 'vitest'
+
+describe('X Parser', () => {
+  describe('X timeline', () => {
+    it('can parse into X timeline from username without @', async () => {
+      const input = 'feindura'
+      const result = await parsePlatformInput(GRID_WIDGET_TYPE.Enum.X, input)
+
+      expect(result).toEqual({
+        widgetType: 'X',
+        type: 'timeline',
+        username: 'feindura',
+      })
+    })
+
+    it('can parse into X timeline from username with @', async () => {
+      const input = '@feindura'
+      const result = await parsePlatformInput(GRID_WIDGET_TYPE.Enum.X, input)
+
+      expect(result).toEqual({
+        widgetType: 'X',
+        type: 'timeline',
+        username: 'feindura',
+      })
+    })
+
+    it('can parse into X timeline from x.com URL', async () => {
+      const input = 'https://x.com/lukso_io'
+      const result = await parsePlatformInput(GRID_WIDGET_TYPE.Enum.X, input)
+
+      expect(result).toEqual({
+        widgetType: 'X',
+        type: 'timeline',
+        username: 'lukso_io',
+      })
+    })
+
+    it('can parse into X timeline from twitter.com URL', async () => {
+      const input = 'https://twitter.com/lukso_io'
+      const result = await parsePlatformInput(GRID_WIDGET_TYPE.Enum.X, input)
+
+      expect(result).toEqual({
+        widgetType: 'X',
+        type: 'timeline',
+        username: 'lukso_io',
+      })
+    })
+
+    it('can parse into X timeline from embed code', async () => {
+      const input =
+        '<a class="twitter-timeline" href="https://twitter.com/lukso_io?ref_src=twsrc%5Etfw">Tweets by lukso_io</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>'
+      const result = await parsePlatformInput(GRID_WIDGET_TYPE.Enum.X, input)
+
+      expect(result).toEqual({
+        widgetType: 'X',
+        type: 'timeline',
+        username: 'lukso_io',
+      })
+    })
+  })
+
+  describe('X status (post)', () => {
+    it('can parse into X status from x.com URL', async () => {
+      const input = 'https://x.com/feindura/status/1804519711377436675'
+      const result = await parsePlatformInput(GRID_WIDGET_TYPE.Enum.X, input)
+
+      expect(result).toEqual({
+        widgetType: 'X',
+        type: 'status',
+        username: 'feindura',
+        id: '1804519711377436675',
+      })
+    })
+
+    it('can parse into X status from twitter.com URL', async () => {
+      const input = 'https://twitter.com/feindura/status/1804519711377436675'
+      const result = await parsePlatformInput(GRID_WIDGET_TYPE.Enum.X, input)
+
+      expect(result).toEqual({
+        widgetType: 'X',
+        type: 'status',
+        username: 'feindura',
+        id: '1804519711377436675',
+      })
+    })
+
+    it('can parse into X status from embed code', async () => {
+      const input =
+        '<blockquote class="twitter-tweet" data-lang="en" data-dnt="true" data-theme="dark"><p lang="en" dir="ltr">Get to know the <a href="https://twitter.com/lukso_io?ref_src=twsrc%5Etfw">@lukso_io</a> ecosystem in 3min 🎧 <a href="https://t.co/UUh23NgdfQ">pic.twitter.com/UUh23NgdfQ</a></p>&mdash; Fabian Vogelsteller (@feindura) <a href="https://twitter.com/feindura/status/1804519711377436675?ref_src=twsrc%5Etfw">June 22, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>'
+      const result = await parsePlatformInput(GRID_WIDGET_TYPE.Enum.X, input)
+
+      expect(result).toEqual({
+        widgetType: 'X',
+        type: 'status',
+        username: 'feindura',
+        id: '1804519711377436675',
+        theme: 'dark',
+        language: 'en',
+        donottrack: true,
+      })
+    })
+  })
+
+  describe('X video', () => {
+    it('can parse into X video from embed code', async () => {
+      const input =
+        '<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="en" dir="ltr">Devcon is around the corner, and we’ve got some exciting plans lined up from Nov 9th-16th.<br><br>From the first-ever LUKSO Pink Pop-Up Village to Universal Profile NFC Cards, team talks &amp; side events—there’s plenty to look forward to. Get the details below👇 <a href="https://t.co/2MZvcYghsU">https://t.co/2MZvcYghsU</a></p>&mdash; LUKSO (@lukso_io) <a href="https://twitter.com/lukso_io/status/1852375479275192423?ref_src=twsrc%5Etfw">November 1, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>'
+
+      const result = await parsePlatformInput(GRID_WIDGET_TYPE.Enum.X, input)
+      expect(result).toEqual({
+        widgetType: 'X',
+        type: 'video',
+        id: '1852375479275192423',
+        username: 'lukso_io',
+      })
+    })
+  })
+})
diff --git a/domains/grid/platform-parser/__tests__/youtubeParser.spec.ts b/domains/grid/platform-parser/__tests__/youtubeParser.spec.ts
new file mode 100644
index 00000000..d58d1862
--- /dev/null
+++ b/domains/grid/platform-parser/__tests__/youtubeParser.spec.ts
@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest'
+
+describe('YOUTUBE Input Parser', () => {
+  it.each([
+    [
+      'URL',
+      GRID_WIDGET_TYPE.enum.YOUTUBE,
+      'https://www.youtube.com/watch?v=Vw4JE64hsO8',
+      {
+        widgetType: 'IFRAME',
+        allow:
+          'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share',
+        allowfullscreen: true,
+        frameborder: '0',
+        height: '315',
+        referrerpolicy: 'strict-origin-when-cross-origin',
+        src: 'https://www.youtube-nocookie.com/embed/Vw4JE64hsO8',
+        width: '560',
+      },
+    ],
+    [
+      'Embed Code',
+      GRID_WIDGET_TYPE.enum.YOUTUBE,
+      '<iframe width="560" height="315" src="https://www.youtube.com/embed/Vw4JE64hsO8?si=OwVdFZCStaL90G2W" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>',
+      {
+        widgetType: 'IFRAME',
+        allow:
+          'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share',
+        allowfullscreen: true,
+        frameborder: '0',
+        height: '315',
+        referrerpolicy: 'strict-origin-when-cross-origin',
+        src: 'https://www.youtube-nocookie.com/embed/Vw4JE64hsO8?si=OwVdFZCStaL90G2W',
+        width: '560',
+      },
+    ],
+  ])('correctly parses %s', async (_description, platform, input, expected) => {
+    const result = await parsePlatformInput(platform, input)
+    expect(result).toEqual(expected)
+  })
+})
diff --git a/domains/grid/platform-parser/elfsightParser.ts b/domains/grid/platform-parser/elfsightParser.ts
new file mode 100644
index 00000000..ee3c8bad
--- /dev/null
+++ b/domains/grid/platform-parser/elfsightParser.ts
@@ -0,0 +1,18 @@
+export const PLATFORM_PARSING_PARAMETERS_ELFSIGHT: PlatformParsingParameters = {
+  regexWithCallbacks: [
+    // Match whole embed code
+    {
+      regex:
+        /(?:elfsight-app-)?(?<id>[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})(?:\s+class="([^"]+)")?/,
+      callback: async (matches: RegExpMatchArray[]) => {
+        const properties = getPropertiesFromGroups(matches)
+        const { id } = properties
+
+        return {
+          widgetType: 'ELFSIGHT',
+          id,
+        }
+      },
+    },
+  ],
+}
diff --git a/domains/grid/platform-parser/gridParser.ts b/domains/grid/platform-parser/gridParser.ts
new file mode 100644
index 00000000..6276a432
--- /dev/null
+++ b/domains/grid/platform-parser/gridParser.ts
@@ -0,0 +1,66 @@
+import type { GridWidgetType } from '@/types/grid'
+
+export type RegexWithCallback = {
+  regex: RegExp
+  callback: (
+    matches: RegExpMatchArray[]
+  ) => Promise<Record<string, unknown> | undefined>
+}
+
+export type PlatformParsingParameters = {
+  regexWithCallbacks?: RegexWithCallback[]
+}
+
+export const parsePlatformInput = async (
+  platform: GridWidgetType,
+  input: string
+) => {
+  const platformParsingParameters = PLATFORM_PARSING_PARAMETERS[platform]
+
+  if (!platformParsingParameters) {
+    throw new Error('Invalid platform')
+  }
+
+  const { regexWithCallbacks: regexesWithCallbacks } = platformParsingParameters
+
+  if (!regexesWithCallbacks?.length) {
+    throw new Error('No regex patterns configured')
+  }
+
+  // Check each regex in order
+  for (const { regex, callback } of regexesWithCallbacks) {
+    let matches: RegExpMatchArray[] = []
+    // Check if the regex is global
+    if (regex.global) {
+      matches = Array.from(input.matchAll(regex))
+    } else {
+      const match = input.match(regex)
+
+      if (match) {
+        matches.push(match)
+      }
+    }
+
+    if (matches.length) {
+      return await callback(matches)
+    }
+  }
+
+  throw new Error('Invalid input')
+}
+
+export const getPropertiesFromGroups = (matches: RegExpMatchArray[]) => {
+  return matches.reduce(
+    (acc, match) => {
+      return Object.assign(
+        acc,
+        Object.fromEntries(
+          Object.entries(match.groups || {}).filter(
+            ([, value]) => value !== undefined
+          ) // Filter out undefined values
+        )
+      )
+    },
+    {} as Record<string, string>
+  )
+}
diff --git a/domains/grid/platform-parser/iframeParserFactory.ts b/domains/grid/platform-parser/iframeParserFactory.ts
new file mode 100644
index 00000000..954eb6c5
--- /dev/null
+++ b/domains/grid/platform-parser/iframeParserFactory.ts
@@ -0,0 +1,84 @@
+import { getPropertiesFromGroups } from './gridParser'
+
+// Common iframe attributes regex patterns
+const COMMON_IFRAME_ATTRIBUTES: Record<string, string> = {
+  style: '(?:style="(?<style>[^"]+)")',
+  width: '(?:width="(?<width>\\d+(?:%)?)")',
+  height: '(?:height="(?<height>\\d+(?:%)?)")',
+  frameBorder: '(?:frameBorder="(?<frameBorder>\\d+)")',
+  allow: '(?:allow="(?<allow>[^"]+)")',
+  loading: '(?:loading="(?<loading>[^"]+)")',
+  allowfullscreen: '(?<allowfullscreen>allowfullscreen)',
+  title: '(?:title="(?<title>[^"]+)")',
+  referrerpolicy: '(?:referrerpolicy="(?<referrerpolicy>[^"]+)")',
+  sandbox: '(?:sandbox="(?<sandbox>[^"]+)")',
+}
+
+// Factory function to create platform-specific regex with common attributes
+export const createIframeRegex = (
+  srcPattern: string,
+  additionalAttributes: string[] = []
+) => {
+  const selectedAttributes = [
+    ...additionalAttributes,
+    'style',
+    'width',
+    'height',
+    'frameBorder',
+    'allow',
+    'loading',
+    'allowfullscreen',
+  ]
+  const attributePatterns = selectedAttributes
+    .map(
+      (attr: keyof typeof COMMON_IFRAME_ATTRIBUTES) =>
+        COMMON_IFRAME_ATTRIBUTES[attr]
+    )
+    .filter(Boolean)
+    .join('|')
+
+  return new RegExp(`${srcPattern}|${attributePatterns}`, 'g')
+}
+
+// Generic callback processor for iframe attributes
+export const processIframeAttributes = (
+  matches: RegExpMatchArray[],
+  options: {
+    createSrc: (properties: Record<string, any>) => string
+    defaultAllow?: string
+    additionalProcessing?: (
+      properties: Record<string, any>
+    ) => Record<string, any>
+  }
+) => {
+  const properties = getPropertiesFromGroups(matches)
+  const {
+    style,
+    width,
+    height,
+    frameBorder,
+    allow,
+    loading,
+    allowfullscreen,
+    ...platformSpecific
+  } = properties
+
+  const baseProperties = {
+    src: options.createSrc(platformSpecific),
+    // ...platformSpecific,
+    ...(style && { style }),
+    ...(width && { width }),
+    ...(height && { height }),
+    ...(frameBorder && { frameBorder: Number.parseInt(frameBorder) }),
+    ...((allow && { allow }) ||
+      (options.defaultAllow && {
+        allow: options.defaultAllow,
+      })),
+    ...(loading && { loading }),
+    ...(allowfullscreen && { allowfullscreen: true }),
+  }
+
+  return options.additionalProcessing
+    ? options.additionalProcessing(baseProperties)
+    : baseProperties
+}
diff --git a/domains/grid/platform-parser/instagramParser.ts b/domains/grid/platform-parser/instagramParser.ts
new file mode 100644
index 00000000..715a61fd
--- /dev/null
+++ b/domains/grid/platform-parser/instagramParser.ts
@@ -0,0 +1,19 @@
+export const PLATFORM_PARSING_PARAMETERS_INSTAGRAM: PlatformParsingParameters =
+  {
+    regexWithCallbacks: [
+      {
+        regex:
+          /https:\/\/www\.instagram\.com\/(?<type>p|reel|profile|tv)\/(?<id>[\w-]+)\/?(?<params>\?[^"]*)?/,
+        callback: async (matches: RegExpMatchArray[]) => {
+          const properties = getPropertiesFromGroups(matches)
+          const { type, id } = properties
+
+          return {
+            widgetType: 'INSTAGRAM',
+            type,
+            id,
+          }
+        },
+      },
+    ],
+  }
diff --git a/domains/grid/platform-parser/soundcloudParser.ts b/domains/grid/platform-parser/soundcloudParser.ts
new file mode 100644
index 00000000..21cdbc42
--- /dev/null
+++ b/domains/grid/platform-parser/soundcloudParser.ts
@@ -0,0 +1,42 @@
+export const PLATFORM_PARSING_PARAMETERS_SOUNDCLOUD: PlatformParsingParameters =
+  {
+    regexWithCallbacks: [
+      {
+        regex: createIframeRegex(
+          '(?:https?:\\/\\/w\\.soundcloud\\.com\\/player\\/\\?(?:(?!url=https).)*url=https(?::|%3A)(?:\\/|%2F){2}api\\.soundcloud\\.com(?:\\/|%2F)(?<type>tracks|playlists|users)(?:\\/|%2F)(?<id>\\d+)(?<params>[^"]*)?)|(?:https:\\/\\/soundcloud\\.com\\/(?<username>[a-zA-Z0-9_-]+)(?:\\/(?:(?<setType>sets)\\/(?<setName>[a-zA-Z0-9_-]+)|(?<trackName>[a-zA-Z0-9_-]+)))?\\/?)'
+        ),
+        callback: async (matches: RegExpMatchArray[]) => {
+          return processIframeAttributes(matches, {
+            createSrc: properties => {
+              // Handle embedded player URL
+              if (properties.type && properties.id) {
+                return `https://w.soundcloud.com/player/?url=https://api.soundcloud.com/${properties.type}/${properties.id}${properties.params || ''}`
+              }
+
+              // Handle direct Soundcloud URL conversion
+              if (properties.username) {
+                const path =
+                  properties.setType && properties.setName
+                    ? `${properties.username}/sets/${properties.setName}`
+                    : properties.trackName
+                      ? `${properties.username}/${properties.trackName}`
+                      : properties.username
+
+                return `https://w.soundcloud.com/player/?url=https://soundcloud.com/${path}`
+              }
+
+              throw new Error('Invalid Soundcloud URL format')
+            },
+            defaultAllow:
+              'autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture',
+            additionalProcessing: properties => ({
+              ...properties,
+              widgetType: 'IFRAME',
+              height: properties.height || '166',
+              width: properties.width || '100%',
+            }),
+          })
+        },
+      },
+    ],
+  }
diff --git a/domains/grid/platform-parser/spotifyParser.ts b/domains/grid/platform-parser/spotifyParser.ts
new file mode 100644
index 00000000..4312de0c
--- /dev/null
+++ b/domains/grid/platform-parser/spotifyParser.ts
@@ -0,0 +1,26 @@
+import {
+  createIframeRegex,
+  processIframeAttributes,
+} from './iframeParserFactory'
+
+export const PLATFORM_PARSING_PARAMETERS_SPOTIFY: PlatformParsingParameters = {
+  regexWithCallbacks: [
+    {
+      regex: createIframeRegex(
+        'https?:\\/\\/open\\.spotify\\.com\\/(?:embed\\/)?(?<type>track|album|playlist|artist)\\/(?<id>[^?"]+)(?:\\?(?<params>[^"\'\\s]*))?'
+      ),
+      callback: async (matches: RegExpMatchArray[]) => {
+        return processIframeAttributes(matches, {
+          createSrc: ({ type, id, params }) =>
+            `https://open.spotify.com/embed/${type}/${id}${params ? `?${params}` : ''}`,
+          defaultAllow:
+            'clipboard-write; encrypted-media; fullscreen; picture-in-picture',
+          additionalProcessing: properties => ({
+            ...properties,
+            widgetType: 'IFRAME',
+          }),
+        })
+      },
+    },
+  ],
+}
diff --git a/domains/grid/platform-parser/warpcastParser.ts b/domains/grid/platform-parser/warpcastParser.ts
new file mode 100644
index 00000000..0575546b
--- /dev/null
+++ b/domains/grid/platform-parser/warpcastParser.ts
@@ -0,0 +1,22 @@
+export const PLATFORM_PARSING_PARAMETERS_WARPCAST: PlatformParsingParameters = {
+  regexWithCallbacks: [
+    // Match whole embed code
+    {
+      regex: createIframeRegex(
+        '@?(?:https:\\/\\/warpcast\\.com\\/)?(?<username>[\\w.-]+)(?:\\/(?<id>[\\w]+))?'
+      ),
+      callback: async (matches: RegExpMatchArray[]) => {
+        return processIframeAttributes(matches, {
+          createSrc: ({ username, id }) =>
+            `https://warpcast.com/${username}${id ? `/${id}` : ''}`,
+          defaultAllow:
+            'clipboard-write; encrypted-media; fullscreen; picture-in-picture',
+          additionalProcessing: properties => ({
+            ...properties,
+            widgetType: 'IFRAME',
+          }),
+        })
+      },
+    },
+  ],
+}
diff --git a/domains/grid/platform-parser/xParser.ts b/domains/grid/platform-parser/xParser.ts
new file mode 100644
index 00000000..f2032cad
--- /dev/null
+++ b/domains/grid/platform-parser/xParser.ts
@@ -0,0 +1,40 @@
+import { GRID_WIDGET_TYPE } from '@/domains/grid/shared/config'
+
+export const PLATFORM_PARSING_PARAMETERS_X: PlatformParsingParameters = {
+  regexWithCallbacks: [
+    {
+      regex:
+        /(?:https?:\/\/(?:(?:www\.)?(?:twitter|x)\.com)\/(?<username>[a-zA-Z0-9_]+)(?:\/status\/(?<id>\d+))?(?:\?[^"'\s]*)?)|(?:data-media-max-width="(?<mediaWidth>\d+)")|(?:data-theme="(?<theme>\w+)")|(?:data-lang="(?<language>\w+)")|(?:data-dnt="(?<doNotTrack>true|false)")/g,
+      callback: async (matches: RegExpMatchArray[]) => {
+        // Flatten all matches' groups into a single object
+        const properties = getPropertiesFromGroups(matches)
+        const { username, id, mediaWidth, theme, language, doNotTrack } =
+          properties
+        const type = mediaWidth ? 'video' : id ? 'status' : 'timeline'
+
+        return {
+          widgetType: GRID_WIDGET_TYPE.enum.X,
+          type,
+          username,
+          ...(id && { id }),
+          ...(theme && { theme }),
+          ...(language && { language }),
+          ...(doNotTrack && { donottrack: doNotTrack === 'true' }),
+        }
+      },
+    },
+    // Match a handle with @ symbol
+    {
+      regex: /^@?(?<username>[a-zA-Z0-9_]{1,15})$/,
+      callback: async (matches: RegExpMatchArray[]) => {
+        const { username } = matches[0]?.groups ?? {} // Get the first match's first group
+
+        return {
+          widgetType: GRID_WIDGET_TYPE.enum.X,
+          type: 'timeline',
+          username,
+        }
+      },
+    },
+  ],
+}
diff --git a/domains/grid/platform-parser/youtubeParser.ts b/domains/grid/platform-parser/youtubeParser.ts
new file mode 100644
index 00000000..7ccddc99
--- /dev/null
+++ b/domains/grid/platform-parser/youtubeParser.ts
@@ -0,0 +1,57 @@
+export const PLATFORM_PARSING_PARAMETERS_YOUTUBE: PlatformParsingParameters = {
+  regexWithCallbacks: [
+    {
+      regex: createIframeRegex(
+        // Direct watch URL
+        '(?:https?:\\/\\/(?:www\\.)?youtube\\.com\\/watch\\?v=(?<videoId>[^&\\s"]+)(?:&(?<params>[^"\'\\s]*))?)|' +
+          // Embed URL
+          '(?:https?:\\/\\/(?:www\\.)?youtube(?:-nocookie)?\\.com\\/embed\\/(?<embedVideoId>[^?"]+)(?:\\?(?<embedParams>[^"\'\\s]*))?)',
+        ['title', 'referrerpolicy']
+      ),
+      callback: async (
+        matches: RegExpMatchArray[]
+      ): Promise<Record<string, any>> => {
+        return processIframeAttributes(matches, {
+          createSrc: properties => {
+            const vid = properties.videoId || properties.embedVideoId
+            const params = properties.params || properties.embedParams
+            return `https://www.youtube-nocookie.com/embed/${vid}${params ? `?${params}` : ''}`
+          },
+          defaultAllow:
+            'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share',
+          additionalProcessing: properties => ({
+            ...properties,
+            widgetType: 'IFRAME',
+            width: properties.width || '560',
+            height: properties.height || '315',
+            frameborder: properties.frameborder || '0',
+            allowfullscreen: true,
+            referrerpolicy:
+              properties.referrerpolicy || 'strict-origin-when-cross-origin',
+          }),
+        })
+      },
+    },
+    // Fallback for direct video ID input
+    {
+      regex: /^(?<videoId>[a-zA-Z0-9_-]{11})$/,
+      callback: async (
+        matches: RegExpMatchArray[]
+      ): Promise<Record<string, any>> => {
+        const { videoId } = getPropertiesFromGroups(matches)
+        return {
+          widgetType: 'IFRAME',
+          videoId,
+          src: `https://www.youtube-nocookie.com/embed/${videoId}`,
+          width: '560',
+          height: '315',
+          frameborder: '0',
+          allow:
+            'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share',
+          allowfullscreen: true,
+          referrerpolicy: 'strict-origin-when-cross-origin',
+        }
+      },
+    },
+  ],
+}
diff --git a/domains/grid/schema/elfsightWidgetSchema.ts b/domains/grid/schema/elfsightWidgetSchema.ts
new file mode 100644
index 00000000..fa34c6ba
--- /dev/null
+++ b/domains/grid/schema/elfsightWidgetSchema.ts
@@ -0,0 +1,16 @@
+import { z } from 'zod'
+
+export const elfsightWidgetSchema = z.object({
+  id: z.string(),
+})
+
+export const elfsightWidgetInputSchema = iframeWidgetSchema
+  .partial()
+  .extend({
+    input: z.string(),
+  })
+  .transform((values, ctx) =>
+    platformParseTransform(values.input, ctx, GRID_WIDGET_TYPE.enum.ELFSIGHT)
+  )
+
+export type ElfsightWidgetProperties = z.input<typeof elfsightWidgetSchema>
diff --git a/domains/grid/schema/gridConfigSchema.ts b/domains/grid/schema/gridConfigSchema.ts
new file mode 100644
index 00000000..826090d1
--- /dev/null
+++ b/domains/grid/schema/gridConfigSchema.ts
@@ -0,0 +1,17 @@
+import { z } from 'zod'
+
+export const gridConfigWidgetSchema = z.object({
+  width: z.number().default(1),
+  height: z.number().default(1),
+  type: GRID_WIDGET_TYPE,
+  properties: gridWidgetProperties,
+})
+
+export const gridConfigSchema = z.object({
+  title: z.string().default(DEFAULT_GRID_TITLE),
+  grid: z.array(gridConfigWidgetSchema).default([]),
+  gridColumns: z.number().default(GRID_COLUMNS_MIN),
+})
+
+export type GridConfigWidget = z.input<typeof gridConfigWidgetSchema>
+export type GridConfig = z.input<typeof gridConfigSchema>
diff --git a/domains/grid/schema/gridSchema.ts b/domains/grid/schema/gridSchema.ts
new file mode 100644
index 00000000..1d26eeaa
--- /dev/null
+++ b/domains/grid/schema/gridSchema.ts
@@ -0,0 +1,51 @@
+import { z } from 'zod'
+
+export const gridWidgetProperties = z.union([
+  iframeWidgetSchema,
+  imagesWidgetSchema,
+  textWidgetSchema,
+  instagramWidgetSchema,
+  soundCloudWidgetSchema,
+  spotifyWidgetSchema,
+  warpcastWidgetSchema,
+  xWidgetSchema,
+  youtubeWidgetSchema,
+])
+
+export const gridWidgetSchema = z.object({
+  w: z.number().positive(),
+  h: z.number().positive(),
+  x: z.number().positive(),
+  y: z.number().positive(),
+  i: z.string().or(z.number()),
+  type: GRID_WIDGET_TYPE,
+  originalWidth: z.number().optional(),
+  properties: gridWidgetProperties.or(z.object({})),
+  isResizable: z.boolean().optional(),
+  isDraggable: z.boolean().optional(),
+  static: z.boolean().optional(),
+})
+
+export const gridWidgetWithoutCordsSchema = gridWidgetSchema.omit({
+  x: true,
+  y: true,
+})
+
+export const gridSchema = z.object({
+  title: z.string(),
+  grid: z.array(gridWidgetSchema),
+  gridColumns: z.number(),
+  id: z.string(),
+})
+
+export const gridInputSchema = z.object({
+  title: z.string().trim().superRefine(nonEmptyValidator),
+  gridColumns: z.number().default(GRID_COLUMNS_MIN),
+})
+
+export type GridWidget = z.input<typeof gridWidgetSchema>
+export type GridWidgetWithoutCords = z.input<
+  typeof gridWidgetWithoutCordsSchema
+>
+export type Grid = z.input<typeof gridSchema>
+export type GridWidgetProperties = z.input<typeof gridWidgetProperties>
diff --git a/domains/grid/schema/iframeWidgetSchema.ts b/domains/grid/schema/iframeWidgetSchema.ts
new file mode 100644
index 00000000..a00e5e3e
--- /dev/null
+++ b/domains/grid/schema/iframeWidgetSchema.ts
@@ -0,0 +1,34 @@
+import { z } from 'zod'
+
+const iframeReferrerPolicy = z.enum([
+  '',
+  'no-referrer',
+  'no-referrer-when-downgrade',
+  'origin',
+  'origin-when-cross-origin',
+  'same-origin',
+  'strict-origin',
+  'strict-origin-when-cross-origin',
+  'unsafe-url',
+])
+
+export const iframeWidgetSchema = z.object({
+  src: z.string().transform(urlTransform),
+  allow: z.string().optional(),
+  allowfullscreen: z.boolean().optional(),
+  referrerpolicy: iframeReferrerPolicy.optional(),
+})
+
+export const iframeWidgetInputSchema = iframeWidgetSchema
+  .partial()
+  .extend({
+    input: z.string().transform(urlTransform),
+  })
+  .transform(values => ({
+    ...values,
+    src: values.input,
+    widgetType: GRID_WIDGET_TYPE.enum.IFRAME,
+  }))
+
+export type IframeWidgetProperties = z.input<typeof iframeWidgetSchema>
+export type IframeReferrerPolicy = z.infer<typeof iframeReferrerPolicy>
diff --git a/domains/grid/schema/imagesWidgetSchema.ts b/domains/grid/schema/imagesWidgetSchema.ts
new file mode 100644
index 00000000..04ebe07f
--- /dev/null
+++ b/domains/grid/schema/imagesWidgetSchema.ts
@@ -0,0 +1,11 @@
+import { z } from 'zod'
+
+const imagesType = z.enum(['grid', 'carousel'])
+
+export const imagesWidgetSchema = z.object({
+  type: imagesType.default(imagesType.enum.grid),
+  images: z.array(z.string().transform(urlTransform)),
+})
+
+export type ImagesWidgetProperties = z.input<typeof imagesWidgetSchema>
+export type ImagesType = z.infer<typeof imagesType>
diff --git a/domains/grid/schema/instagramWidgetSchema.ts b/domains/grid/schema/instagramWidgetSchema.ts
new file mode 100644
index 00000000..f6de2af8
--- /dev/null
+++ b/domains/grid/schema/instagramWidgetSchema.ts
@@ -0,0 +1,31 @@
+import { z } from 'zod'
+
+export const instagramType = z.enum(['p', 'reel'])
+
+// properties schema that is used by JSON config
+export const instagramWidgetSchema = z.object({
+  type: instagramType,
+  id: z.string(),
+})
+
+// input schema used to validate user input
+export const instagramWidgetInputSchema = instagramWidgetSchema
+  .partial()
+  .extend({
+    input: z.string(),
+  })
+  .transform((values, ctx) =>
+    platformParseTransform(values.input, ctx, GRID_WIDGET_TYPE.enum.INSTAGRAM)
+  )
+
+// builder schema used to re-create src/embed from properties
+export const instagramWidgetBuilderSchema = instagramWidgetSchema
+  .extend({
+    src: z.string().optional(),
+  })
+  .transform(
+    async values =>
+      await platformBuildTransform(values, GRID_WIDGET_TYPE.enum.INSTAGRAM)
+  )
+
+export type InstagramWidgetProperties = z.input<typeof instagramWidgetSchema>
diff --git a/domains/grid/schema/soundCloudWidgetSchema.ts b/domains/grid/schema/soundCloudWidgetSchema.ts
new file mode 100644
index 00000000..e8914b40
--- /dev/null
+++ b/domains/grid/schema/soundCloudWidgetSchema.ts
@@ -0,0 +1,14 @@
+import { z } from 'zod'
+
+export const soundCloudWidgetSchema = iframeWidgetSchema.extend({})
+
+export const soundCloudWidgetInputSchema = iframeWidgetSchema
+  .partial()
+  .extend({
+    input: z.string(),
+  })
+  .transform((values, ctx) =>
+    platformParseTransform(values.input, ctx, GRID_WIDGET_TYPE.enum.SOUNDCLOUD)
+  )
+
+export type SoundCloudWidgetProperties = z.input<typeof soundCloudWidgetSchema>
diff --git a/domains/grid/schema/spotifyWidgetSchema.ts b/domains/grid/schema/spotifyWidgetSchema.ts
new file mode 100644
index 00000000..5102c418
--- /dev/null
+++ b/domains/grid/schema/spotifyWidgetSchema.ts
@@ -0,0 +1,14 @@
+import { z } from 'zod'
+
+export const spotifyWidgetSchema = iframeWidgetSchema.extend({})
+
+export const spotifyWidgetInputSchema = iframeWidgetSchema
+  .partial()
+  .extend({
+    input: z.string(),
+  })
+  .transform((values, ctx) =>
+    platformParseTransform(values.input, ctx, GRID_WIDGET_TYPE.enum.SPOTIFY)
+  )
+
+export type SpotifyWidgetProperties = z.input<typeof spotifyWidgetSchema>
diff --git a/domains/grid/schema/textWidgetSchema.ts b/domains/grid/schema/textWidgetSchema.ts
new file mode 100644
index 00000000..c946d551
--- /dev/null
+++ b/domains/grid/schema/textWidgetSchema.ts
@@ -0,0 +1,12 @@
+import { z } from 'zod'
+
+export const textWidgetSchema = z.object({
+  titleColor: z.string().default('#243542').superRefine(hexColorValidator),
+  textColor: z.string().default('#243542').superRefine(hexColorValidator),
+  backgroundColor: z.string().default('#f9f9f9').superRefine(hexColorValidator),
+  title: z.string().optional(),
+  text: z.string().optional(),
+  link: z.string().optional(),
+})
+
+export type TextWidgetProperties = z.input<typeof textWidgetSchema>
diff --git a/domains/grid/schema/transforms/platformBuildTransform.ts b/domains/grid/schema/transforms/platformBuildTransform.ts
new file mode 100644
index 00000000..cabd77ef
--- /dev/null
+++ b/domains/grid/schema/transforms/platformBuildTransform.ts
@@ -0,0 +1,16 @@
+import { z } from 'zod'
+
+export const platformBuildTransform = async (
+  properties: GridWidgetProperties,
+  type: GridWidgetType
+) => {
+  try {
+    const build = await buildPlatformOutput(type, properties)
+    return {
+      ...properties,
+      src: build.src,
+    }
+  } catch (error: unknown) {
+    return z.NEVER
+  }
+}
diff --git a/domains/grid/schema/transforms/platformParseTransform.ts b/domains/grid/schema/transforms/platformParseTransform.ts
new file mode 100644
index 00000000..38f5074b
--- /dev/null
+++ b/domains/grid/schema/transforms/platformParseTransform.ts
@@ -0,0 +1,25 @@
+import { z } from 'zod'
+
+const { formatMessage } = useIntl()
+
+export const platformParseTransform = async (
+  input: string,
+  ctx: z.RefinementCtx,
+  type: GridWidgetType
+) => {
+  try {
+    const properties = await parsePlatformInput(type, input)
+    return {
+      ...properties,
+    }
+  } catch (error: unknown) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: formatMessage('errors_invalid_input', {
+        name: capitalize(type),
+      }),
+      path: ['input'],
+    })
+    return z.NEVER
+  }
+}
diff --git a/domains/grid/schema/transforms/urlTransform.ts b/domains/grid/schema/transforms/urlTransform.ts
new file mode 100644
index 00000000..268f13ed
--- /dev/null
+++ b/domains/grid/schema/transforms/urlTransform.ts
@@ -0,0 +1,22 @@
+import { z } from 'zod'
+
+/**
+ * Validate url
+ *
+ * @param value
+ * @param ctx
+ */
+export const urlTransform = async (value: string, ctx: z.RefinementCtx) => {
+  const { formatMessage } = useIntl()
+
+  try {
+    new URL(value)
+    return encodeURI(value)
+  } catch (error) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: formatMessage('errors_invalid_url'),
+    })
+    return z.NEVER
+  }
+}
diff --git a/domains/grid/schema/validators/hexColorValidator.ts b/domains/grid/schema/validators/hexColorValidator.ts
new file mode 100644
index 00000000..69729725
--- /dev/null
+++ b/domains/grid/schema/validators/hexColorValidator.ts
@@ -0,0 +1,26 @@
+import tinycolor from 'tinycolor2'
+import { z } from 'zod'
+
+/**
+ * Validate hex color
+ *
+ * @param value
+ * @param ctx
+ */
+export const hexColorValidator = async (
+  value: string,
+  ctx: z.RefinementCtx
+) => {
+  const { formatMessage } = useIntl()
+  const tColor = tinycolor(value)
+
+  if (!tColor.isValid()) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: formatMessage('errors_invalid_hex_color'),
+    })
+    return false
+  }
+
+  return true
+}
diff --git a/domains/grid/schema/validators/nonEmptyValidator.ts b/domains/grid/schema/validators/nonEmptyValidator.ts
new file mode 100644
index 00000000..38113c6b
--- /dev/null
+++ b/domains/grid/schema/validators/nonEmptyValidator.ts
@@ -0,0 +1,24 @@
+import { z } from 'zod'
+
+/**
+ * Validate non empty value
+ *
+ * @param value
+ * @param ctx
+ */
+export const nonEmptyValidator = async (
+  value: string,
+  ctx: z.RefinementCtx
+) => {
+  const { formatMessage } = useIntl()
+
+  if (value === '') {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: formatMessage('errors_required'),
+    })
+    return false
+  }
+
+  return true
+}
diff --git a/domains/grid/schema/warpcastWidgetSchema.ts b/domains/grid/schema/warpcastWidgetSchema.ts
new file mode 100644
index 00000000..d59ec3bb
--- /dev/null
+++ b/domains/grid/schema/warpcastWidgetSchema.ts
@@ -0,0 +1,19 @@
+import { z } from 'zod'
+
+export const warpcastWidgetSchema = iframeWidgetSchema.extend({})
+
+export const warpcastWidgetInputSchema = iframeWidgetSchema
+  .partial()
+  .extend({
+    input: z.string(),
+  })
+  .transform(
+    async (values, ctx) =>
+      await platformParseTransform(
+        values.input,
+        ctx,
+        GRID_WIDGET_TYPE.enum.WARPCAST
+      )
+  )
+
+export type WarpcastWidgetProperties = z.input<typeof warpcastWidgetSchema>
diff --git a/domains/grid/schema/xWidgetSchema.ts b/domains/grid/schema/xWidgetSchema.ts
new file mode 100644
index 00000000..188e2938
--- /dev/null
+++ b/domains/grid/schema/xWidgetSchema.ts
@@ -0,0 +1,37 @@
+import { z } from 'zod'
+
+export const xType = z.enum(['timeline', 'status', 'video'])
+
+// properties schema that is used by JSON config
+export const xWidgetSchema = z.object({
+  type: xType,
+  username: z.string(),
+  id: z.string().optional(),
+  theme: z.string().optional(),
+  language: z.string().optional(),
+  doNotTrack: z.boolean().optional(),
+})
+
+// input schema used to validate user input
+export const xWidgetInputSchema = xWidgetSchema
+  .partial()
+  .extend({
+    input: z.string(),
+  })
+  .transform(
+    async (values, ctx) =>
+      await platformParseTransform(values.input, ctx, GRID_WIDGET_TYPE.enum.X)
+  )
+
+// builder schema used to re-create src/embed from properties
+export const xWidgetBuilderSchema = xWidgetSchema
+  .extend({
+    src: z.string().optional(),
+  })
+  .transform(
+    async values =>
+      await platformBuildTransform(values, GRID_WIDGET_TYPE.enum.X)
+  )
+
+export type XWidgetProperties = z.input<typeof xWidgetSchema>
+export type XType = z.infer<typeof xType>
diff --git a/domains/grid/schema/youtubeWidgetSchema.ts b/domains/grid/schema/youtubeWidgetSchema.ts
new file mode 100644
index 00000000..6e6a4e9e
--- /dev/null
+++ b/domains/grid/schema/youtubeWidgetSchema.ts
@@ -0,0 +1,19 @@
+import { z } from 'zod'
+
+export const youtubeWidgetSchema = iframeWidgetSchema.extend({})
+
+export const youtubeWidgetInputSchema = iframeWidgetSchema
+  .partial()
+  .extend({
+    input: z.string(),
+  })
+  .transform(
+    async (values, ctx) =>
+      await platformParseTransform(
+        values.input,
+        ctx,
+        GRID_WIDGET_TYPE.enum.YOUTUBE
+      )
+  )
+
+export type YoutubeWidgetProperties = z.input<typeof youtubeWidgetSchema>
diff --git a/domains/grid/shared/config.ts b/domains/grid/shared/config.ts
new file mode 100644
index 00000000..b8a83452
--- /dev/null
+++ b/domains/grid/shared/config.ts
@@ -0,0 +1,127 @@
+import { z } from 'zod'
+
+export const GRID_WIDGET_TYPE = z.enum([
+  // custom
+  'TEXT',
+  'IFRAME',
+  'IMAGES',
+  'ELFSIGHT',
+
+  // social media
+  'X',
+  'INSTAGRAM',
+  'WARPCAST',
+
+  // music
+  'SPOTIFY',
+  'SOUNDCLOUD',
+
+  // video
+  'YOUTUBE',
+
+  // static widgets for visual purposes
+  'ADD_CONTENT',
+])
+
+// map zod schema to widget type
+export const WIDGET_SCHEMA_MAP: Partial<Record<GridWidgetType, GridSchemaMap>> =
+  {
+    [GRID_WIDGET_TYPE.enum.TEXT]: {
+      input: textWidgetSchema,
+      output: textWidgetSchema,
+      build: textWidgetSchema,
+    },
+    [GRID_WIDGET_TYPE.enum.X]: {
+      input: xWidgetInputSchema,
+      output: xWidgetSchema,
+      build: xWidgetBuilderSchema,
+    },
+    [GRID_WIDGET_TYPE.enum.INSTAGRAM]: {
+      input: instagramWidgetInputSchema,
+      output: instagramWidgetSchema,
+      build: instagramWidgetBuilderSchema,
+    },
+    [GRID_WIDGET_TYPE.enum.IFRAME]: {
+      input: iframeWidgetInputSchema,
+      output: iframeWidgetSchema,
+      build: iframeWidgetSchema,
+    },
+    [GRID_WIDGET_TYPE.enum.IMAGES]: {
+      input: imagesWidgetSchema,
+      output: imagesWidgetSchema,
+      build: imagesWidgetSchema,
+    },
+    [GRID_WIDGET_TYPE.enum.YOUTUBE]: {
+      input: youtubeWidgetInputSchema,
+      output: youtubeWidgetSchema,
+      build: youtubeWidgetSchema,
+    },
+    [GRID_WIDGET_TYPE.enum.SPOTIFY]: {
+      input: spotifyWidgetInputSchema,
+      output: spotifyWidgetSchema,
+      build: spotifyWidgetSchema,
+    },
+    [GRID_WIDGET_TYPE.enum.SOUNDCLOUD]: {
+      input: soundCloudWidgetInputSchema,
+      output: soundCloudWidgetSchema,
+      build: soundCloudWidgetSchema,
+    },
+    [GRID_WIDGET_TYPE.enum.WARPCAST]: {
+      input: warpcastWidgetInputSchema,
+      output: warpcastWidgetSchema,
+      build: warpcastWidgetSchema,
+    },
+    [GRID_WIDGET_TYPE.enum.ELFSIGHT]: {
+      input: elfsightWidgetInputSchema,
+      output: elfsightWidgetSchema,
+      build: elfsightWidgetSchema,
+    },
+  }
+
+// grid breakpoint where the grid switches into mobile mode
+export const GRID_BREAKPOINT_PX = 768
+
+// default title for the grid, this usually is the title of the first grid
+export const DEFAULT_GRID_TITLE = 'Main'
+
+// debounce timeout for grid resize handler
+export const GRID_RESIZE_DEBOUNCE_TIMEOUT_MS = 250
+
+// margin between columns and rows
+export const GRID_SPACING_PX = 16
+
+// default row height ratio based on the column width.
+// 0.75 represents popular 4:3 aspect ratio
+export const DEFAULT_GRID_ROW_HEIGHT_RATIO = 0.75
+
+// maximum rotation angle in degrees for a widget while moving
+export const MAX_WIDGET_ROTATE_WHILE_MOVE_DEG = 20
+
+// default number of columns in "small" mode
+export const DEFAULT_SMALL_COLUMN_NUMBER = 1
+
+// minimum and maximum number of columns in the grid
+export const GRID_COLUMNS_MIN = 2
+export const GRID_COLUMNS_MAX = 4
+
+export const PLATFORM_PARSING_PARAMETERS: Partial<
+  Record<GridWidgetType, PlatformParsingParameters | undefined>
+> = {
+  [GRID_WIDGET_TYPE.enum.X]: PLATFORM_PARSING_PARAMETERS_X,
+  [GRID_WIDGET_TYPE.enum.INSTAGRAM]: PLATFORM_PARSING_PARAMETERS_INSTAGRAM,
+  [GRID_WIDGET_TYPE.enum.SPOTIFY]: PLATFORM_PARSING_PARAMETERS_SPOTIFY,
+  [GRID_WIDGET_TYPE.enum.SOUNDCLOUD]: PLATFORM_PARSING_PARAMETERS_SOUNDCLOUD,
+  [GRID_WIDGET_TYPE.enum.YOUTUBE]: PLATFORM_PARSING_PARAMETERS_YOUTUBE,
+  [GRID_WIDGET_TYPE.enum.ELFSIGHT]: PLATFORM_PARSING_PARAMETERS_ELFSIGHT,
+  [GRID_WIDGET_TYPE.enum.WARPCAST]: PLATFORM_PARSING_PARAMETERS_WARPCAST,
+}
+
+// initial grid
+export const EMPTY_GRID = [
+  {
+    id: DEFAULT_GRID_TITLE.toLowerCase(),
+    title: DEFAULT_GRID_TITLE,
+    grid: [],
+    gridColumns: GRID_COLUMNS_MIN,
+  },
+]
diff --git a/domains/grid/utils/__tests__/buildGrid.spec.ts b/domains/grid/utils/__tests__/buildGrid.spec.ts
new file mode 100644
index 00000000..186c6095
--- /dev/null
+++ b/domains/grid/utils/__tests__/buildGrid.spec.ts
@@ -0,0 +1,884 @@
+import { describe, expect, it } from 'vitest'
+
+import { buildGrid } from '../buildGrid'
+
+describe('buildGrid', () => {
+  it('should return an empty grid when given an empty grid', () => {
+    const grid: Grid[] = []
+    const result = buildGrid(grid)
+    expect(result).toEqual([])
+  })
+
+  it('should re-order grid based on x/y cords', () => {
+    const grid: Grid[] = [
+      {
+        id: '1',
+        title: 'Test Grid',
+        grid: [
+          {
+            i: '1',
+            type: GRID_WIDGET_TYPE.enum.IFRAME,
+            w: 1,
+            h: 1,
+            properties: {},
+            x: 1,
+            y: 0,
+          },
+          {
+            i: '2',
+            type: GRID_WIDGET_TYPE.enum.IFRAME,
+            w: 1,
+            h: 1,
+            properties: {},
+            x: 0,
+            y: 0,
+          },
+          {
+            i: '3',
+            type: GRID_WIDGET_TYPE.enum.IFRAME,
+            w: 1,
+            h: 1,
+            properties: {},
+            x: 0,
+            y: 1,
+          },
+        ],
+        gridColumns: 1,
+      },
+    ]
+    const result = buildGrid(grid)
+    expect(result).toEqual([
+      {
+        id: '1',
+        title: 'Test Grid',
+        grid: [
+          {
+            i: '2',
+            type: GRID_WIDGET_TYPE.enum.IFRAME,
+            w: 1,
+            h: 1,
+            properties: {},
+            x: 0,
+            y: 0,
+          },
+          {
+            i: '1',
+            type: GRID_WIDGET_TYPE.enum.IFRAME,
+            w: 1,
+            h: 1,
+            properties: {},
+            x: 0,
+            y: 1,
+          },
+          {
+            i: '3',
+            type: GRID_WIDGET_TYPE.enum.IFRAME,
+            w: 1,
+            h: 1,
+            properties: {},
+            x: 0,
+            y: 2,
+          },
+        ],
+        gridColumns: 1,
+      },
+    ])
+  })
+
+  describe('withAddContentPlaceholder', () => {
+    it('should remove "add content" placeholder from grid', () => {
+      const grid: Grid[] = [
+        {
+          id: '1',
+          title: 'Test Grid',
+          grid: [
+            {
+              i: '1',
+              type: GRID_WIDGET_TYPE.enum.IFRAME,
+              w: 1,
+              h: 1,
+              x: 0,
+              y: 0,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '2',
+              type: GRID_WIDGET_TYPE.enum.ADD_CONTENT,
+              w: 1,
+              h: 1,
+              x: 0,
+              y: 1,
+              properties: {},
+            },
+          ],
+          gridColumns: 1,
+        },
+      ]
+      const result = buildGrid(grid)
+      expect(result).toEqual([
+        {
+          id: '1',
+          title: 'Test Grid',
+          grid: [
+            {
+              i: '1',
+              type: GRID_WIDGET_TYPE.enum.IFRAME,
+              w: 1,
+              h: 1,
+              x: 0,
+              y: 0,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+          ],
+          gridColumns: 1,
+        },
+      ])
+    })
+
+    it('should add placeholder', () => {
+      const grid: Grid[] = [
+        {
+          id: '1',
+          title: 'Test Grid',
+          grid: [
+            {
+              i: '1',
+              type: GRID_WIDGET_TYPE.enum.IFRAME,
+              w: 1,
+              h: 1,
+              x: 0,
+              y: 0,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+          ],
+          gridColumns: 1,
+        },
+      ]
+      const result = buildGrid(grid, undefined, true)
+      expect(result).toEqual([
+        {
+          id: '1',
+          title: 'Test Grid',
+          grid: [
+            {
+              i: '1',
+              type: GRID_WIDGET_TYPE.enum.IFRAME,
+              w: 1,
+              h: 1,
+              x: 0,
+              y: 0,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: 'placeholder',
+              type: GRID_WIDGET_TYPE.enum.ADD_CONTENT,
+              w: 1,
+              h: 1,
+              x: 0,
+              y: 1,
+              properties: {},
+              isResizable: false,
+            },
+          ],
+          gridColumns: 1,
+        },
+      ])
+    })
+  })
+
+  describe('grid 1', () => {
+    it('should build 1 column grid', () => {
+      /*
+      Column 0
+      ---------
+      |   A   |  <-- height 2
+      |       |
+      |   B   |  <-- height 1
+      |   C   |  <-- height 2
+      |       |
+      |   D   |  <-- height 1
+      */
+      const grid: Grid[] = [
+        {
+          id: '1',
+          title: 'Test Grid',
+          grid: [
+            {
+              i: '1',
+              type: GRID_WIDGET_TYPE.enum.TEXT,
+              w: 1,
+              h: 2,
+              x: 0,
+              y: 0,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '2',
+              type: GRID_WIDGET_TYPE.enum.TEXT,
+              w: 1,
+              h: 1,
+              x: 0,
+              y: 0,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '3',
+              type: GRID_WIDGET_TYPE.enum.IFRAME,
+              w: 1,
+              h: 2,
+              x: 0,
+              y: 0,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '4',
+              type: GRID_WIDGET_TYPE.enum.IMAGES,
+              w: 1,
+              h: 1,
+              x: 0,
+              y: 0,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+          ],
+          gridColumns: 1,
+        },
+      ]
+
+      expect(buildGrid(grid)).toEqual([
+        {
+          id: '1',
+          title: 'Test Grid',
+          grid: [
+            {
+              i: '1',
+              x: 0,
+              y: 0,
+              w: 1,
+              h: 2,
+              type: GRID_WIDGET_TYPE.enum.TEXT,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '2',
+              x: 0,
+              y: 2,
+              w: 1,
+              h: 1,
+              type: GRID_WIDGET_TYPE.enum.TEXT,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '3',
+              x: 0,
+              y: 3,
+              w: 1,
+              h: 2,
+              type: GRID_WIDGET_TYPE.enum.IFRAME,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '4',
+              x: 0,
+              y: 5,
+              w: 1,
+              h: 1,
+              type: GRID_WIDGET_TYPE.enum.IMAGES,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+          ],
+          gridColumns: 1,
+        },
+      ])
+    })
+
+    it('should build 2 column grid', () => {
+      /*
+      Column 0     Column 1
+      ----------------------
+      |   A   |    |   B   |  <-- A: height 2, B: height 1
+      |       |    |-------|
+      |-------|    |   C   |  <-- C: height 2
+      |   D   |    |       |  <-- D: height 1
+      */
+      const grid: Grid[] = [
+        {
+          id: '1',
+          title: 'Test Grid',
+          grid: [
+            {
+              i: '1',
+              type: GRID_WIDGET_TYPE.enum.TEXT,
+              w: 1,
+              h: 2,
+              x: 0,
+              y: 0,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '2',
+              type: GRID_WIDGET_TYPE.enum.TEXT,
+              w: 1,
+              h: 1,
+              x: 0,
+              y: 0,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '3',
+              type: GRID_WIDGET_TYPE.enum.IFRAME,
+              w: 1,
+              h: 2,
+              x: 0,
+              y: 0,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '4',
+              type: GRID_WIDGET_TYPE.enum.IMAGES,
+              w: 1,
+              h: 1,
+              x: 0,
+              y: 0,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+          ],
+          gridColumns: 2,
+        },
+      ]
+
+      expect(buildGrid(grid)).toEqual([
+        {
+          id: '1',
+          title: 'Test Grid',
+          grid: [
+            {
+              i: '1',
+              x: 0,
+              y: 0,
+              w: 1,
+              h: 2,
+              type: GRID_WIDGET_TYPE.enum.TEXT,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '2',
+              x: 1,
+              y: 0,
+              w: 1,
+              h: 1,
+              type: GRID_WIDGET_TYPE.enum.TEXT,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '3',
+              x: 1,
+              y: 1,
+              w: 1,
+              h: 2,
+              type: GRID_WIDGET_TYPE.enum.IFRAME,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '4',
+              x: 0,
+              y: 2,
+              w: 1,
+              h: 1,
+              type: GRID_WIDGET_TYPE.enum.IMAGES,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+          ],
+          gridColumns: 2,
+        },
+      ])
+    })
+
+    it('should build 3 column grid', () => {
+      /*
+      Column 0     Column 1     Column 2
+      -----------------------------------
+      |   A   |    |   B   |    |   C   |  <-- A: height 2, B: height 1, C: height 2
+      |       |    |-------|    |       |
+      |-------|    |   D   |    |-------|
+      */
+      const grid: Grid[] = [
+        {
+          id: '1',
+          title: 'Test Grid',
+          grid: [
+            {
+              i: '1',
+              type: GRID_WIDGET_TYPE.enum.TEXT,
+              w: 1,
+              h: 2,
+              x: 0,
+              y: 0,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '2',
+              type: GRID_WIDGET_TYPE.enum.TEXT,
+              w: 1,
+              h: 1,
+              x: 0,
+              y: 0,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '3',
+              type: GRID_WIDGET_TYPE.enum.IFRAME,
+              w: 1,
+              h: 2,
+              x: 0,
+              y: 0,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '4',
+              type: GRID_WIDGET_TYPE.enum.IMAGES,
+              w: 1,
+              h: 1,
+              x: 0,
+              y: 0,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+          ],
+          gridColumns: 3,
+        },
+      ]
+
+      expect(buildGrid(grid)).toEqual([
+        {
+          id: '1',
+          title: 'Test Grid',
+          grid: [
+            {
+              i: '1',
+              x: 0,
+              y: 0,
+              w: 1,
+              h: 2,
+              type: GRID_WIDGET_TYPE.enum.TEXT,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '2',
+              x: 1,
+              y: 0,
+              w: 1,
+              h: 1,
+              type: GRID_WIDGET_TYPE.enum.TEXT,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '3',
+              x: 2,
+              y: 0,
+              w: 1,
+              h: 2,
+              type: GRID_WIDGET_TYPE.enum.IFRAME,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '4',
+              x: 1,
+              y: 1,
+              w: 1,
+              h: 1,
+              type: GRID_WIDGET_TYPE.enum.IMAGES,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+          ],
+          gridColumns: 3,
+        },
+      ])
+    })
+  })
+
+  describe('grid 2', () => {
+    it('should build 1 column grid', () => {
+      /*
+      Column 0
+      ---------
+      |   A   |  <-- height 2
+      |       |
+      |-------|
+      |   B   |  <-- height 1
+      |-------|
+      |   C   |  <-- height 1
+      */
+      const grid: Grid[] = [
+        {
+          id: '1',
+          title: 'Test Grid',
+          grid: [
+            {
+              i: '1',
+              type: GRID_WIDGET_TYPE.enum.IMAGES,
+              w: 2,
+              h: 2,
+              x: 0,
+              y: 0,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '2',
+              type: GRID_WIDGET_TYPE.enum.TEXT,
+              w: 1,
+              h: 1,
+              x: 0,
+              y: 0,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '3',
+              type: GRID_WIDGET_TYPE.enum.IMAGES,
+              w: 1,
+              h: 1,
+              x: 0,
+              y: 0,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+          ],
+          gridColumns: 1,
+        },
+      ]
+
+      expect(buildGrid(grid)).toEqual([
+        {
+          id: '1',
+          title: 'Test Grid',
+          grid: [
+            {
+              i: '1',
+              x: 0,
+              y: 0,
+              w: 1,
+              h: 2,
+              type: GRID_WIDGET_TYPE.enum.IMAGES,
+              properties: { prop1: 'value1', prop2: 'value2' },
+              originalWidth: 2,
+            },
+            {
+              i: '2',
+              x: 0,
+              y: 2,
+              w: 1,
+              h: 1,
+              type: GRID_WIDGET_TYPE.enum.TEXT,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '3',
+              x: 0,
+              y: 3,
+              w: 1,
+              h: 1,
+              type: GRID_WIDGET_TYPE.enum.IMAGES,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+          ],
+          gridColumns: 1,
+        },
+      ])
+    })
+
+    it('should build 2 column grid', () => {
+      /*
+      Column 0     Column 1
+      ----------------------
+      |   A   |    |   A   |  <-- height 2 (width spans 2 columns)
+      |-------|    |-------|
+      |   B   |    |   C   |  <-- height 1 each
+      */
+      const grid: Grid[] = [
+        {
+          id: '1',
+          title: 'Test Grid',
+          grid: [
+            {
+              i: '1',
+              type: GRID_WIDGET_TYPE.enum.IMAGES,
+              w: 2,
+              h: 2,
+              x: 0,
+              y: 0,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '2',
+              type: GRID_WIDGET_TYPE.enum.TEXT,
+              w: 1,
+              h: 1,
+              x: 0,
+              y: 0,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '3',
+              type: GRID_WIDGET_TYPE.enum.IMAGES,
+              w: 1,
+              h: 1,
+              x: 0,
+              y: 0,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+          ],
+          gridColumns: 2,
+        },
+      ]
+
+      expect(buildGrid(grid)).toEqual([
+        {
+          id: '1',
+          title: 'Test Grid',
+          grid: [
+            {
+              i: '1',
+              x: 0,
+              y: 0,
+              w: 2,
+              h: 2,
+              type: GRID_WIDGET_TYPE.enum.IMAGES,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '2',
+              x: 0,
+              y: 2,
+              w: 1,
+              h: 1,
+              type: GRID_WIDGET_TYPE.enum.TEXT,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '3',
+              x: 1,
+              y: 2,
+              w: 1,
+              h: 1,
+              type: GRID_WIDGET_TYPE.enum.IMAGES,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+          ],
+          gridColumns: 2,
+        },
+      ])
+    })
+  })
+
+  describe('grid 3', () => {
+    it('should build 1 column grid', () => {
+      /*
+      Column 0
+      ---------
+      |   A   |  <-- height 1
+      |-------|
+      |   B   |  <-- height 2
+      |   B   |
+      |-------|
+      |   C   |  <-- height 1
+      |-------|
+      |   D   |  <-- height 1
+      */
+      const grid: Grid[] = [
+        {
+          id: '1',
+          title: 'Test Grid',
+          grid: [
+            {
+              i: '1',
+              type: GRID_WIDGET_TYPE.enum.IMAGES,
+              w: 1,
+              h: 1,
+              x: 0,
+              y: 0,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '2',
+              type: GRID_WIDGET_TYPE.enum.IFRAME,
+              w: 2,
+              h: 2,
+              x: 0,
+              y: 0,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '3',
+              type: GRID_WIDGET_TYPE.enum.TEXT,
+              w: 1,
+              h: 1,
+              x: 0,
+              y: 0,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '4',
+              type: GRID_WIDGET_TYPE.enum.IMAGES,
+              w: 2,
+              h: 1,
+              x: 0,
+              y: 0,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+          ],
+          gridColumns: 1,
+        },
+      ]
+
+      expect(buildGrid(grid)).toEqual([
+        {
+          id: '1',
+          title: 'Test Grid',
+          grid: [
+            {
+              i: '1',
+              x: 0,
+              y: 0,
+              w: 1,
+              h: 1,
+              type: GRID_WIDGET_TYPE.enum.IMAGES,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '2',
+              x: 0,
+              y: 1,
+              w: 1,
+              h: 2,
+              type: GRID_WIDGET_TYPE.enum.IFRAME,
+              properties: { prop1: 'value1', prop2: 'value2' },
+              originalWidth: 2,
+            },
+            {
+              i: '3',
+              x: 0,
+              y: 3,
+              w: 1,
+              h: 1,
+              type: GRID_WIDGET_TYPE.enum.TEXT,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '4',
+              x: 0,
+              y: 4,
+              w: 1,
+              h: 1,
+              type: GRID_WIDGET_TYPE.enum.IMAGES,
+              properties: { prop1: 'value1', prop2: 'value2' },
+              originalWidth: 2,
+            },
+          ],
+          gridColumns: 1,
+        },
+      ])
+    })
+
+    it('should build 2 column grid', () => {
+      /*
+      Column 0     Column 1
+      ----------------------
+      |   A   |             |  <-- height 1
+      |-------|             |
+      |   B   |     B       |  <-- height 2 (width spans 2 columns)
+      |-------|-------------|
+      |   C   |             |  <-- height 1
+      |-------|-------------|
+      |   D   |     D       |  <-- height 1 (width spans 2 columns)
+      */
+      const grid: Grid[] = [
+        {
+          id: '1',
+          title: 'Test Grid',
+          grid: [
+            {
+              i: '1',
+              type: GRID_WIDGET_TYPE.enum.IMAGES,
+              w: 1,
+              h: 1,
+              x: 0,
+              y: 0,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '2',
+              type: GRID_WIDGET_TYPE.enum.IFRAME,
+              w: 2,
+              h: 2,
+              x: 0,
+              y: 0,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '3',
+              type: GRID_WIDGET_TYPE.enum.TEXT,
+              w: 1,
+              h: 1,
+              x: 0,
+              y: 0,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '4',
+              type: GRID_WIDGET_TYPE.enum.IMAGES,
+              w: 2,
+              h: 1,
+              x: 0,
+              y: 0,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+          ],
+          gridColumns: 2,
+        },
+      ]
+
+      expect(buildGrid(grid)).toEqual([
+        {
+          id: '1',
+          title: 'Test Grid',
+          grid: [
+            {
+              i: '1',
+              x: 0,
+              y: 0,
+              w: 1,
+              h: 1,
+              type: GRID_WIDGET_TYPE.enum.IMAGES,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '2',
+              x: 0,
+              y: 1,
+              w: 2,
+              h: 2,
+              type: GRID_WIDGET_TYPE.enum.IFRAME,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '3',
+              x: 0,
+              y: 3,
+              w: 1,
+              h: 1,
+              type: GRID_WIDGET_TYPE.enum.TEXT,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+            {
+              i: '4',
+              x: 0,
+              y: 4,
+              w: 2,
+              h: 1,
+              type: GRID_WIDGET_TYPE.enum.IMAGES,
+              properties: { prop1: 'value1', prop2: 'value2' },
+            },
+          ],
+          gridColumns: 2,
+        },
+      ])
+    })
+  })
+})
diff --git a/domains/grid/utils/__tests__/compareGridWidgets.spec.ts b/domains/grid/utils/__tests__/compareGridWidgets.spec.ts
new file mode 100644
index 00000000..e9091c80
--- /dev/null
+++ b/domains/grid/utils/__tests__/compareGridWidgets.spec.ts
@@ -0,0 +1,353 @@
+import { describe, expect, it } from 'vitest'
+
+import { compareGridWidgets } from '../compareGridWidgets'
+
+describe('compareGridWidgets', () => {
+  it('returns empty array when both grids are the same', () => {
+    const gridA = [
+      {
+        i: 'widget-1',
+        x: 0,
+        y: 0,
+        w: 1,
+        h: 1,
+        type: GRID_WIDGET_TYPE.enum.IFRAME,
+        properties: {
+          src: 'https://example.com',
+        },
+      },
+    ]
+    const gridB = [
+      {
+        i: 'widget-1',
+        x: 0,
+        y: 0,
+        w: 1,
+        h: 1,
+        type: GRID_WIDGET_TYPE.enum.IFRAME,
+        properties: {
+          src: 'https://example.com',
+        },
+      },
+    ]
+
+    expect(compareGridWidgets(gridA, gridB)).toEqual([])
+    expect(compareGridWidgets([], [])).toEqual([])
+  })
+
+  it('returns array of changes when widgets change positions', () => {
+    const gridA = [
+      {
+        i: 'widget-1',
+        x: 0,
+        y: 0,
+        w: 1,
+        h: 1,
+        type: GRID_WIDGET_TYPE.enum.IFRAME,
+        properties: {
+          src: 'https://example.com',
+        },
+      },
+    ]
+    const gridB = [
+      {
+        i: 'widget-1',
+        x: 1,
+        y: 0,
+        w: 1,
+        h: 1,
+        type: GRID_WIDGET_TYPE.enum.IFRAME,
+        properties: {
+          src: 'https://example.com',
+        },
+      },
+    ]
+
+    expect(compareGridWidgets(gridA, gridB)).toEqual([
+      {
+        oldWidget: gridA[0],
+        newWidget: gridB[0],
+      },
+    ])
+  })
+
+  it('returns array of changes when widgets change sizes', () => {
+    const gridA = [
+      {
+        i: 'widget-1',
+        x: 0,
+        y: 0,
+        w: 1,
+        h: 1,
+        type: GRID_WIDGET_TYPE.enum.IFRAME,
+        properties: {
+          src: 'https://example.com',
+        },
+      },
+    ]
+    const gridB = [
+      {
+        i: 'widget-1',
+        x: 0,
+        y: 0,
+        w: 1,
+        h: 2,
+        type: GRID_WIDGET_TYPE.enum.IFRAME,
+        properties: {
+          src: 'https://example.com',
+        },
+      },
+    ]
+
+    expect(compareGridWidgets(gridA, gridB)).toEqual([
+      {
+        oldWidget: gridA[0],
+        newWidget: gridB[0],
+      },
+    ])
+  })
+
+  it('returns array of changes when widgets change types', () => {
+    const gridA = [
+      {
+        i: 'widget-1',
+        x: 0,
+        y: 0,
+        w: 1,
+        h: 1,
+        type: GRID_WIDGET_TYPE.enum.IFRAME,
+        properties: {
+          src: 'https://example.com',
+        },
+      },
+    ]
+    const gridB = [
+      {
+        i: 'widget-1',
+        x: 0,
+        y: 0,
+        w: 1,
+        h: 1,
+        type: GRID_WIDGET_TYPE.enum.IMAGES,
+        properties: {
+          src: 'https://example.com',
+        },
+      },
+    ]
+
+    expect(compareGridWidgets(gridA, gridB)).toEqual([
+      {
+        oldWidget: gridA[0],
+        newWidget: gridB[0],
+      },
+    ])
+  })
+
+  it('returns array of changes when widgets change properties', () => {
+    const gridA = [
+      {
+        i: 'widget-1',
+        x: 0,
+        y: 0,
+        w: 1,
+        h: 1,
+        type: GRID_WIDGET_TYPE.enum.IFRAME,
+        properties: {
+          src: 'https://example.com',
+        },
+      },
+    ]
+    const gridB = [
+      {
+        i: 'widget-1',
+        x: 0,
+        y: 0,
+        w: 1,
+        h: 1,
+        type: GRID_WIDGET_TYPE.enum.IFRAME,
+        properties: {
+          src: 'https://example.org',
+        },
+      },
+    ]
+
+    expect(compareGridWidgets(gridA, gridB)).toEqual([
+      {
+        oldWidget: gridA[0],
+        newWidget: gridB[0],
+      },
+    ])
+  })
+
+  it('returns array of changes when widgets are added', () => {
+    const gridA = [] as GridWidget[]
+    const gridB = [
+      {
+        i: 'widget-1',
+        x: 0,
+        y: 0,
+        w: 1,
+        h: 1,
+        type: GRID_WIDGET_TYPE.enum.IFRAME,
+        properties: {
+          src: 'https://example.com',
+        },
+      },
+    ]
+
+    expect(compareGridWidgets(gridA, gridB)).toEqual([
+      {
+        oldWidget: null,
+        newWidget: gridB[0],
+      },
+    ])
+  })
+
+  it('returns array of changes when widgets are removed', () => {
+    const gridA = [
+      {
+        i: 'widget-1',
+        x: 0,
+        y: 0,
+        w: 1,
+        h: 1,
+        type: GRID_WIDGET_TYPE.enum.IFRAME,
+        properties: {
+          src: 'https://example.com',
+        },
+      },
+    ]
+    const gridB = [] as GridWidget[]
+
+    expect(compareGridWidgets(gridA, gridB)).toEqual([
+      {
+        oldWidget: gridA[0],
+        newWidget: null,
+      },
+    ])
+  })
+
+  it('returns array of changes when multiple widgets change', () => {
+    const gridA = [
+      {
+        i: 'widget-1',
+        x: 0,
+        y: 0,
+        w: 1,
+        h: 1,
+        type: GRID_WIDGET_TYPE.enum.IFRAME,
+        properties: {
+          src: 'https://example.com',
+        },
+      },
+      {
+        i: 'widget-2',
+        x: 1,
+        y: 0,
+        w: 1,
+        h: 1,
+        type: GRID_WIDGET_TYPE.enum.IMAGES,
+        properties: {
+          src: 'https://example.org/image.png',
+        },
+      },
+      {
+        i: 'widget-3',
+        x: 0,
+        y: 1,
+        w: 1,
+        h: 1,
+        type: GRID_WIDGET_TYPE.enum.IMAGES,
+        properties: {
+          src: 'https://example.org/image.png',
+        },
+      },
+    ]
+    const gridB = [
+      {
+        i: 'widget-1',
+        x: 1,
+        y: 0,
+        w: 1,
+        h: 1,
+        type: GRID_WIDGET_TYPE.enum.IMAGES,
+        properties: {
+          src: 'https://example.org',
+        },
+      },
+      {
+        i: 'widget-2',
+        x: 0,
+        y: 0,
+        w: 1,
+        h: 1,
+        type: GRID_WIDGET_TYPE.enum.IFRAME,
+        properties: {
+          src: 'https://example.com',
+        },
+      },
+      {
+        i: 'widget-3',
+        x: 0,
+        y: 1,
+        w: 1,
+        h: 1,
+        type: GRID_WIDGET_TYPE.enum.IMAGES,
+        properties: {
+          src: 'https://example.org/image.png',
+        },
+      },
+    ]
+
+    expect(compareGridWidgets(gridA, gridB)).toEqual([
+      {
+        oldWidget: gridA[0],
+        newWidget: gridB[0],
+      },
+      {
+        oldWidget: gridA[1],
+        newWidget: gridB[1],
+      },
+    ])
+  })
+
+  it('ignores ADD_CONTENT widgets', () => {
+    const gridA = [
+      {
+        i: 'widget-1',
+        x: 0,
+        y: 0,
+        w: 1,
+        h: 1,
+        type: GRID_WIDGET_TYPE.enum.IFRAME,
+        properties: {
+          src: 'https://example.com',
+        },
+      },
+      {
+        i: 'placeholder',
+        x: 0,
+        y: 1,
+        w: 1,
+        h: 1,
+        type: GRID_WIDGET_TYPE.enum.ADD_CONTENT,
+        properties: {},
+      },
+    ]
+    const gridB = [
+      {
+        i: 'widget-1',
+        x: 0,
+        y: 0,
+        w: 1,
+        h: 1,
+        type: GRID_WIDGET_TYPE.enum.IFRAME,
+        properties: {
+          src: 'https://example.com',
+        },
+      },
+    ]
+
+    expect(compareGridWidgets(gridA, gridB)).toEqual([])
+  })
+})
diff --git a/domains/grid/utils/__tests__/compareGrids.spec.ts b/domains/grid/utils/__tests__/compareGrids.spec.ts
new file mode 100644
index 00000000..f59968f3
--- /dev/null
+++ b/domains/grid/utils/__tests__/compareGrids.spec.ts
@@ -0,0 +1,166 @@
+import { describe, expect, it } from 'vitest'
+
+import { compareGrids } from '../compareGrids'
+
+describe('compareGrids', () => {
+  it('should return no changes for identical grids', () => {
+    const gridA: Grid[] = [
+      {
+        id: 'grid-1',
+        title: 'Grid 1',
+        grid: [
+          {
+            i: 'widget1',
+            x: 0,
+            y: 0,
+            w: 1,
+            h: 1,
+            type: GRID_WIDGET_TYPE.enum.IFRAME,
+            properties: {},
+          },
+        ],
+        gridColumns: 2,
+      },
+    ]
+    const gridB: Grid[] = [
+      {
+        id: 'grid-1',
+        title: 'Grid 1',
+        grid: [
+          {
+            i: 'widget1',
+            x: 0,
+            y: 0,
+            w: 1,
+            h: 1,
+            type: GRID_WIDGET_TYPE.enum.IFRAME,
+            properties: {},
+          },
+        ],
+        gridColumns: 2,
+      },
+    ]
+
+    const result = compareGrids(gridA, gridB)
+    expect(result).toEqual([])
+  })
+
+  it('should return changes for grids with different titles', () => {
+    const gridA: Grid[] = [
+      { id: 'grid-1', title: 'Grid 1', grid: [], gridColumns: 2 },
+    ]
+    const gridB: Grid[] = [
+      { id: 'grid-2', title: 'Grid 2', grid: [], gridColumns: 2 },
+    ]
+
+    const result = compareGrids(gridA, gridB)
+    expect(result).toEqual([
+      {
+        oldGrid: gridA[0],
+        newGrid: gridB[0],
+      },
+    ])
+  })
+
+  it('should return changes for grids with different column numbers', () => {
+    const gridA: Grid[] = [
+      { id: 'grid-1', title: 'Grid 1', grid: [], gridColumns: 2 },
+    ]
+    const gridB: Grid[] = [
+      { id: 'grid-1', title: 'Grid 1', grid: [], gridColumns: 3 },
+    ]
+
+    const result = compareGrids(gridA, gridB)
+    expect(result).toEqual([
+      {
+        oldGrid: gridA[0],
+        newGrid: gridB[0],
+      },
+    ])
+  })
+
+  it('should return changes for grids with different widgets', () => {
+    const gridA: Grid[] = [
+      {
+        id: 'grid-1',
+        title: 'Grid 1',
+        grid: [
+          {
+            i: 'widget1',
+            x: 0,
+            y: 0,
+            w: 1,
+            h: 1,
+            type: GRID_WIDGET_TYPE.enum.IFRAME,
+            properties: {},
+          },
+        ],
+        gridColumns: 2,
+      },
+    ]
+    const gridB: Grid[] = [
+      {
+        id: 'grid-3',
+        title: 'Grid 1',
+        grid: [
+          {
+            i: 'widget1',
+            x: 0,
+            y: 0,
+            w: 1,
+            h: 1,
+            type: GRID_WIDGET_TYPE.enum.IMAGES,
+            properties: {},
+          },
+        ],
+        gridColumns: 2,
+      },
+    ]
+
+    const result = compareGrids(gridA, gridB)
+    expect(result).toEqual([
+      {
+        oldGrid: gridA[0],
+        newGrid: gridB[0],
+      },
+    ])
+  })
+
+  it('should return changes when one grid is empty and the other is not', () => {
+    const gridA: Grid[] = []
+    const gridB: Grid[] = [
+      {
+        id: 'grid-1',
+        title: 'Grid 1',
+        grid: [
+          {
+            i: 'widget1',
+            x: 0,
+            y: 0,
+            w: 1,
+            h: 1,
+            type: GRID_WIDGET_TYPE.enum.IFRAME,
+            properties: {},
+          },
+        ],
+        gridColumns: 2,
+      },
+    ]
+
+    const result = compareGrids(gridA, gridB)
+    expect(result).toEqual([
+      {
+        oldGrid: undefined,
+        newGrid: gridB[0],
+      },
+    ])
+  })
+
+  it('should return no changes for two empty grids', () => {
+    const gridA: Grid[] = []
+    const gridB: Grid[] = []
+
+    const result = compareGrids(gridA, gridB)
+    expect(result).toEqual([])
+  })
+})
diff --git a/domains/grid/utils/__tests__/configToGrid.spec.ts b/domains/grid/utils/__tests__/configToGrid.spec.ts
new file mode 100644
index 00000000..218270c1
--- /dev/null
+++ b/domains/grid/utils/__tests__/configToGrid.spec.ts
@@ -0,0 +1,123 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import { configToGrid } from '../configToGrid'
+
+vi.mock('/domains/grid/utils/generateItemId', () => ({
+  generateItemId: () => 'test-id',
+}))
+
+describe('configToGrid', () => {
+  it('should create unique id for each grid item', () => {
+    const config = [
+      {
+        title: 'default',
+        grid: [],
+        gridColumns: 2,
+      },
+      {
+        title: 'default',
+        grid: [],
+        gridColumns: 2,
+      },
+    ]
+    const result = [
+      {
+        id: 'default',
+        title: 'default',
+        grid: [],
+        gridColumns: 2,
+      },
+      {
+        id: 'default-0',
+        title: 'default',
+        grid: [],
+        gridColumns: 2,
+      },
+    ]
+
+    expect(configToGrid(config)).toEqual(result)
+  })
+
+  it('should return an empty grid for an empty config', () => {
+    expect(configToGrid([])).toEqual([])
+  })
+
+  it('should correctly handle a single item config', () => {
+    const config = [
+      {
+        title: 'single',
+        grid: [
+          {
+            type: GRID_WIDGET_TYPE.enum.IFRAME,
+            width: 1,
+            height: 1,
+            properties: {
+              src: 'https://via.placeholder.com/150',
+            },
+          },
+          {
+            type: GRID_WIDGET_TYPE.enum.TEXT,
+            width: 1,
+            height: 1,
+            properties: {
+              title: 'Hey',
+              text: 'Customize your grid grid!',
+              backgroundColor: '#9db9b9',
+            },
+          },
+          {
+            type: GRID_WIDGET_TYPE.enum.IMAGES,
+            width: 1,
+            height: 1,
+            properties: {
+              images: ['https://via.placeholder.com/150'],
+              type: 'grid',
+            },
+          },
+        ],
+        gridColumns: 2,
+      },
+    ]
+    const result = [
+      {
+        id: 'single',
+        title: 'single',
+        grid: [
+          {
+            type: 'IFRAME',
+            properties: {
+              src: 'https://via.placeholder.com/150',
+            },
+            w: 1,
+            h: 1,
+            i: 'test-id',
+          },
+          {
+            type: 'TEXT',
+            properties: {
+              title: 'Hey',
+              text: 'Customize your grid grid!',
+              backgroundColor: '#9db9b9',
+            },
+            w: 1,
+            h: 1,
+            i: 'test-id',
+          },
+          {
+            type: 'IMAGES',
+            properties: {
+              images: ['https://via.placeholder.com/150'],
+              type: 'grid',
+            },
+            w: 1,
+            h: 1,
+            i: 'test-id',
+          },
+        ],
+        gridColumns: 2,
+      },
+    ]
+
+    expect(configToGrid(config)).toEqual(result)
+  })
+})
diff --git a/domains/grid/utils/__tests__/createGridId.spec.ts b/domains/grid/utils/__tests__/createGridId.spec.ts
new file mode 100644
index 00000000..c39d3049
--- /dev/null
+++ b/domains/grid/utils/__tests__/createGridId.spec.ts
@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest'
+
+import { createGridId } from '../createGridId'
+
+describe('createGridId', () => {
+  it('should generate a unique ID based on the title', () => {
+    const gridItem = { title: 'Test Title', gridColumns: 2 }
+    const grid: Grid[] = []
+
+    const id = createGridId(gridItem, grid)
+    expect(id).toBe('test-title')
+  })
+
+  it('should append a number to the ID if the title is not unique', () => {
+    const gridItem = { title: 'Test Title', gridColumns: 2 }
+    const grid: Grid[] = [
+      { id: 'test-title', title: 'Test Title', grid: [], gridColumns: 2 },
+    ]
+
+    const id = createGridId(gridItem, grid)
+    expect(id).toBe('test-title-0')
+  })
+
+  it('should handle an empty title', () => {
+    const gridItem = { title: '', gridColumns: 2 }
+    const grid: Grid[] = []
+
+    const id = createGridId(gridItem, grid)
+    expect(id).toBe('')
+  })
+
+  it('should handle special characters in the title', () => {
+    const gridItem = { title: 'Test @ Title!', gridColumns: 2 }
+    const grid: Grid[] = []
+
+    const id = createGridId(gridItem, grid)
+    expect(id).toBe('test-title')
+  })
+})
diff --git a/domains/grid/utils/__tests__/createWidgetObject.spec.ts b/domains/grid/utils/__tests__/createWidgetObject.spec.ts
new file mode 100644
index 00000000..4fe2bb1d
--- /dev/null
+++ b/domains/grid/utils/__tests__/createWidgetObject.spec.ts
@@ -0,0 +1,59 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import { createWidgetObject } from '../createWidgetObject'
+
+vi.mock('/domains/grid/utils/generateItemId', () => ({
+  generateItemId: () => 'test-id',
+}))
+
+describe('createWidgetObject', () => {
+  it('should create a widget object with default values', () => {
+    const newWidget = {
+      type: GRID_WIDGET_TYPE.enum.IFRAME,
+    }
+    const result = createWidgetObject(newWidget)
+
+    expect(result).toEqual({
+      type: 'IFRAME',
+      w: 1,
+      h: 1,
+      i: 'test-id',
+      properties: {},
+    })
+  })
+
+  it('should create a widget object with passed values', () => {
+    const newWidget = {
+      type: GRID_WIDGET_TYPE.enum.IFRAME,
+      w: 2,
+      h: 2,
+      properties: {
+        src: 'https://example.com',
+      },
+    }
+    const result = createWidgetObject(newWidget)
+
+    expect(result).toEqual({
+      type: 'IFRAME',
+      w: 2,
+      h: 2,
+      i: 'test-id',
+      properties: {
+        src: 'https://example.com',
+      },
+    })
+  })
+
+  it('should throw an error if widget type is undefined', () => {
+    expect(() => createWidgetObject({})).toThrow(
+      'Widget `type` field is undefined'
+    )
+  })
+
+  it('should throw an error if widget type is invalid', () => {
+    // @ts-expect-error
+    expect(() => createWidgetObject({ type: 'invalidType' })).toThrow(
+      'Invalid widget `type` filed'
+    )
+  })
+})
diff --git a/domains/grid/utils/__tests__/gridToConfig.spec.ts b/domains/grid/utils/__tests__/gridToConfig.spec.ts
new file mode 100644
index 00000000..29419fd6
--- /dev/null
+++ b/domains/grid/utils/__tests__/gridToConfig.spec.ts
@@ -0,0 +1,94 @@
+import { describe, expect, it } from 'vitest'
+
+import { gridToConfig } from '../gridToConfig'
+
+describe('gridToConfig', () => {
+  it('should return an empty config for an empty grid', () => {
+    expect(gridToConfig([])).toEqual([])
+  })
+
+  it('should correctly handle a single item grid', () => {
+    const grid = [
+      {
+        id: 'single',
+        title: 'single',
+        grid: [
+          {
+            type: GRID_WIDGET_TYPE.enum.IFRAME,
+            properties: {
+              src: 'https://via.placeholder.com/150',
+            },
+            w: 1,
+            h: 1,
+            i: 'test-id',
+            x: 0,
+            y: 0,
+          },
+          {
+            type: GRID_WIDGET_TYPE.enum.TEXT,
+            properties: {
+              title: 'Hey',
+              text: 'Customize your grid grid!',
+              backgroundColor: '#9db9b9',
+            },
+            w: 1,
+            h: 1,
+            i: 'test-id',
+            x: 0,
+            y: 1,
+          },
+          {
+            type: GRID_WIDGET_TYPE.enum.IMAGES,
+            properties: {
+              images: ['https://via.placeholder.com/150'],
+              type: 'grid',
+            },
+            w: 1,
+            h: 1,
+            i: 'test-id',
+            x: 0,
+            y: 2,
+          },
+        ],
+        gridColumns: 2,
+      },
+    ]
+    const result = [
+      {
+        title: 'single',
+        grid: [
+          {
+            type: 'IFRAME',
+            width: 1,
+            height: 1,
+            properties: {
+              src: 'https://via.placeholder.com/150',
+            },
+          },
+          {
+            type: 'TEXT',
+            width: 1,
+            height: 1,
+            properties: {
+              title: 'Hey',
+              text: 'Customize your grid grid!',
+              backgroundColor: '#9db9b9',
+            },
+          },
+          {
+            type: 'IMAGES',
+            width: 1,
+            height: 1,
+            properties: {
+              images: ['https://via.placeholder.com/150'],
+              type: 'grid',
+            },
+          },
+        ],
+        gridColumns: 2,
+      },
+    ]
+
+    expect(gridToConfig(grid)).toEqual(result)
+  })
+})
diff --git a/domains/grid/utils/__tests__/purifyGridConfig.spec.ts b/domains/grid/utils/__tests__/purifyGridConfig.spec.ts
new file mode 100644
index 00000000..993de990
--- /dev/null
+++ b/domains/grid/utils/__tests__/purifyGridConfig.spec.ts
@@ -0,0 +1,275 @@
+import { describe, expect, it } from 'vitest'
+
+import { purifyGridConfig } from '../purifyGridConfig'
+
+describe('purifyGridConfig', () => {
+  it('should return an empty array for empty configuration', async () => {
+    const result = await purifyGridConfig([])
+    expect(result).toEqual([])
+  })
+
+  it('should return valid grid', async () => {
+    const result = await purifyGridConfig([
+      {
+        title: 'grid-1',
+        gridColumns: 2,
+        grid: [
+          {
+            type: 'IFRAME',
+            width: 1,
+            height: 1,
+            properties: {
+              src: 'https://example.com',
+            },
+          },
+        ],
+      },
+      {
+        title: 'grid-2',
+        gridColumns: 3,
+        grid: [
+          {
+            type: 'IMAGES',
+            width: 1,
+            height: 1,
+            properties: {
+              images: ['https://via.placeholder.com/150'],
+              type: 'grid',
+            },
+          },
+        ],
+      },
+    ])
+    expect(result).toEqual([
+      {
+        title: 'grid-1',
+        gridColumns: 2,
+        grid: [
+          {
+            type: 'IFRAME',
+            width: 1,
+            height: 1,
+            properties: {
+              src: 'https://example.com',
+            },
+          },
+        ],
+      },
+      {
+        title: 'grid-2',
+        gridColumns: 3,
+        grid: [
+          {
+            type: 'IMAGES',
+            width: 1,
+            height: 1,
+            properties: {
+              images: ['https://via.placeholder.com/150'],
+              type: 'grid',
+            },
+          },
+        ],
+      },
+    ])
+  })
+
+  it('should return default column number when value is missing', async () => {
+    const result = await purifyGridConfig([
+      {
+        title: 'grid-1',
+        grid: [
+          {
+            type: 'IFRAME',
+            width: 1,
+            height: 1,
+            properties: {
+              src: 'https://example.com',
+            },
+          },
+        ],
+      },
+    ])
+    expect(result).toEqual([
+      {
+        title: 'grid-1',
+        gridColumns: 2,
+        grid: [
+          {
+            type: 'IFRAME',
+            width: 1,
+            height: 1,
+            properties: {
+              src: 'https://example.com',
+            },
+          },
+        ],
+      },
+    ])
+  })
+
+  it('should return default title when value is missing', async () => {
+    const result = await purifyGridConfig([
+      {
+        gridColumns: 2,
+        grid: [
+          {
+            type: 'IFRAME',
+            width: 1,
+            height: 1,
+            properties: {
+              src: 'https://example.com',
+            },
+          },
+        ],
+      },
+    ])
+    expect(result).toEqual([
+      {
+        title: 'Main',
+        gridColumns: 2,
+        grid: [
+          {
+            type: 'IFRAME',
+            width: 1,
+            height: 1,
+            properties: {
+              src: 'https://example.com',
+            },
+          },
+        ],
+      },
+    ])
+  })
+
+  it('should return empty widget array when value is missing', async () => {
+    const result = await purifyGridConfig([
+      {
+        title: 'grid-1',
+        gridColumns: 2,
+      },
+    ])
+    expect(result).toEqual([
+      {
+        title: 'grid-1',
+        gridColumns: 2,
+        grid: [],
+      },
+    ])
+  })
+
+  it('should recreate grid from invalid element', async () => {
+    const result = await purifyGridConfig([
+      {
+        asdf: 'asdf',
+      },
+    ])
+    expect(result).toEqual([
+      {
+        title: 'Main',
+        gridColumns: 2,
+        grid: [],
+      },
+    ])
+  })
+
+  it('should recreate widget width and height if missing', async () => {
+    const result = await purifyGridConfig([
+      {
+        grid: [
+          {
+            type: 'IFRAME',
+            properties: {
+              src: 'https://example.com',
+            },
+          },
+        ],
+      },
+    ])
+    expect(result).toEqual([
+      {
+        title: 'Main',
+        gridColumns: 2,
+        grid: [
+          {
+            type: 'IFRAME',
+            width: 1,
+            height: 1,
+            properties: {
+              src: 'https://example.com',
+            },
+          },
+        ],
+      },
+    ])
+  })
+
+  it('should remove widget without type', async () => {
+    const result = await purifyGridConfig([
+      {
+        grid: [
+          {
+            type: 'IFRAME',
+            properties: {
+              src: 'https://example.com',
+            },
+          },
+          {
+            properties: {
+              src: 'https://example.com',
+            },
+          },
+        ],
+      },
+    ])
+    expect(result).toEqual([
+      {
+        title: 'Main',
+        gridColumns: 2,
+        grid: [
+          {
+            type: 'IFRAME',
+            width: 1,
+            height: 1,
+            properties: {
+              src: 'https://example.com',
+            },
+          },
+        ],
+      },
+    ])
+  })
+
+  it('should remove widget without properties', async () => {
+    const result = await purifyGridConfig([
+      {
+        grid: [
+          {
+            type: 'IFRAME',
+            properties: {
+              src: 'https://example.com',
+            },
+          },
+          {
+            type: 'IMAGE',
+          },
+        ],
+      },
+    ])
+    expect(result).toEqual([
+      {
+        title: 'Main',
+        gridColumns: 2,
+        grid: [
+          {
+            type: 'IFRAME',
+            width: 1,
+            height: 1,
+            properties: {
+              src: 'https://example.com',
+            },
+          },
+        ],
+      },
+    ])
+  })
+})
diff --git a/domains/grid/utils/buildGrid.ts b/domains/grid/utils/buildGrid.ts
new file mode 100644
index 00000000..0a3ba3a5
--- /dev/null
+++ b/domains/grid/utils/buildGrid.ts
@@ -0,0 +1,78 @@
+export const buildGrid = (
+  grid: Grid[],
+  isMobile?: boolean,
+  withAddContentPlaceholder?: boolean
+): Grid[] => {
+  const _buildGrid = (
+    gridWidgets: GridWidget[],
+    updatedGridWidgets: GridWidget[],
+    gridColumns: number
+  ) => {
+    // remove "add widget" placeholder from grid
+    let _grid = gridWidgets.filter(
+      item => item.type !== GRID_WIDGET_TYPE.enum.ADD_CONTENT
+    )
+
+    // if items already have x/y cords we re-order grid to reflect that
+    _grid = _grid.slice().sort((a, b) => {
+      if (
+        typeof a.x !== 'number' ||
+        typeof a.y !== 'number' ||
+        typeof b.x !== 'number' ||
+        typeof b.y !== 'number'
+      ) {
+        return 0
+      }
+
+      if (a.y === b.y) {
+        return a.x - b.x
+      }
+
+      return a.y - b.y
+    })
+
+    // re-add placeholder
+    if (withAddContentPlaceholder) {
+      _grid.push(
+        createWidgetObject({
+          i: 'placeholder',
+          type: GRID_WIDGET_TYPE.enum.ADD_CONTENT,
+          isResizable: false,
+        }) as GridWidget
+      )
+    }
+
+    for (const widget of _grid) {
+      placeWidgetInGrid(widget, updatedGridWidgets, gridColumns)
+    }
+
+    return updatedGridWidgets
+  }
+
+  return grid.map(item => {
+    const updatedGrid: GridWidget[] = []
+    const gridColumns = getGridColumns(item.gridColumns)
+    return {
+      id: item.id,
+      title: item.title,
+      grid: _buildGrid(
+        item.grid,
+        updatedGrid,
+        isMobile ? DEFAULT_SMALL_COLUMN_NUMBER : gridColumns
+      ),
+      gridColumns,
+    }
+  })
+}
+
+const getGridColumns = (gridColumns?: number) => {
+  if (!gridColumns) {
+    return GRID_COLUMNS_MIN
+  }
+
+  if (gridColumns > GRID_COLUMNS_MAX) {
+    return GRID_COLUMNS_MAX
+  }
+
+  return gridColumns
+}
diff --git a/domains/grid/utils/compareGridWidgets.ts b/domains/grid/utils/compareGridWidgets.ts
new file mode 100644
index 00000000..a5d430a8
--- /dev/null
+++ b/domains/grid/utils/compareGridWidgets.ts
@@ -0,0 +1,57 @@
+/**
+ * Compare two grids and return an array of changes.
+ *
+ * @param gridA - Old grid.
+ * @param gridB - New grid.
+ * @returns Array of changes.
+ */
+export const compareGridWidgets = (
+  _gridA?: GridWidget[],
+  _gridB?: GridWidget[]
+): GridWidgetChange[] => {
+  const result: GridWidgetChange[] = []
+  const propertiesToCheck: (keyof GridWidget)[] = [
+    'x',
+    'y',
+    'w',
+    'h',
+    'type',
+    'properties',
+  ]
+  const gridA =
+    _gridA?.filter(item => item.type !== GRID_WIDGET_TYPE.enum.ADD_CONTENT) ||
+    []
+  const gridB =
+    _gridB?.filter(item => item.type !== GRID_WIDGET_TYPE.enum.ADD_CONTENT) ||
+    []
+  const maxLength = Math.max(gridA.length, gridB.length)
+
+  for (let i = 0; i < maxLength; i++) {
+    const oldWidget = gridA[i]
+    const newWidget = gridB[i]
+
+    if (!oldWidget) {
+      result.push({ oldWidget: null, newWidget })
+    } else if (!newWidget) {
+      result.push({ oldWidget, newWidget: null })
+    } else {
+      const hasChanged = propertiesToCheck.some(prop => {
+        if (prop === 'properties') {
+          return !deepEqual(oldWidget[prop], newWidget[prop])
+        }
+
+        return oldWidget[prop] !== newWidget[prop]
+      })
+
+      if (hasChanged) {
+        result.push({ oldWidget, newWidget })
+      }
+    }
+  }
+
+  if (gridLog.enabled && result.length > 0) {
+    gridLog('Unsaved widget changes', toRaw(result))
+  }
+
+  return result
+}
diff --git a/domains/grid/utils/compareGrids.ts b/domains/grid/utils/compareGrids.ts
new file mode 100644
index 00000000..c30eb23a
--- /dev/null
+++ b/domains/grid/utils/compareGrids.ts
@@ -0,0 +1,36 @@
+/**
+ * Compare two grids and return the changes
+ *
+ * @param gridA
+ * @param gridB
+ * @returns
+ */
+export const compareGrids = (gridA: Grid[], gridB: Grid[]): GridChange[] => {
+  const result: GridChange[] = []
+  const maxLength = Math.max(gridA.length, gridB.length)
+
+  for (let i = 0; i < maxLength; i++) {
+    const oldGrid = gridA[i] as Grid | undefined
+    const newGrid = gridB[i] as Grid | undefined
+
+    // compare differences in title or grid array
+    const comparedWidgets = compareGridWidgets(oldGrid?.grid, newGrid?.grid)
+
+    if (
+      oldGrid?.title !== newGrid?.title ||
+      comparedWidgets.length > 0 ||
+      oldGrid?.gridColumns !== newGrid?.gridColumns
+    ) {
+      result.push({
+        oldGrid: gridA[i],
+        newGrid: gridB[i],
+      })
+    }
+  }
+
+  if (gridLog.enabled && result.length > 0) {
+    gridLog('Unsaved grid changes', toRaw(result))
+  }
+
+  return result
+}
diff --git a/domains/grid/utils/configToGrid.ts b/domains/grid/utils/configToGrid.ts
new file mode 100644
index 00000000..e500f152
--- /dev/null
+++ b/domains/grid/utils/configToGrid.ts
@@ -0,0 +1,40 @@
+/**
+ * Convert Grid config to Grid layout
+ *
+ * @param config
+ */
+export const configToGrid = (config: GridConfig[]): Grid[] => {
+  const grid: Grid[] = []
+
+  for (const configItem of config) {
+    grid.push({
+      id: createGridId(configItem, grid),
+      title: configItem.title || DEFAULT_GRID_TITLE,
+      grid:
+        configItem.grid?.map(widget => {
+          return createWidgetObject({
+            type: widget.type,
+            properties: widget.properties,
+            w: widget.width,
+            h: widget.height,
+          }) as GridWidget
+        }) || [],
+      gridColumns: getGridColumns(configItem.gridColumns),
+    })
+  }
+
+  return grid
+}
+
+/**
+ * Get grid column number
+ *
+ * @param gridColumns
+ */
+const getGridColumns = (gridColumns?: number): number => {
+  if (!gridColumns) {
+    return GRID_COLUMNS_MIN
+  }
+
+  return gridColumns
+}
diff --git a/domains/grid/utils/createGridId.ts b/domains/grid/utils/createGridId.ts
new file mode 100644
index 00000000..ca750712
--- /dev/null
+++ b/domains/grid/utils/createGridId.ts
@@ -0,0 +1,21 @@
+/**
+ * Create a unique id for a grid item based on title
+ *
+ * @param gridItem
+ * @param grid
+ */
+export const createGridId = (
+  gridItem: Partial<GridConfig | Grid>,
+  grid: Grid[]
+): string => {
+  const baseId = slug(gridItem?.title)
+  let uniqueId = baseId
+  let counter = 0
+
+  while (grid.some(item => item.id === uniqueId)) {
+    uniqueId = `${baseId}-${counter}`
+    counter++
+  }
+
+  return uniqueId
+}
diff --git a/domains/grid/utils/createWidgetObject.ts b/domains/grid/utils/createWidgetObject.ts
new file mode 100644
index 00000000..a6d3f571
--- /dev/null
+++ b/domains/grid/utils/createWidgetObject.ts
@@ -0,0 +1,25 @@
+import assert from 'assert'
+
+/**
+ * Create a new widget object with default values
+ *
+ * @param newWidget
+ * @returns
+ */
+export const createWidgetObject = (
+  newWidget: Partial<GridWidgetWithoutCords>
+): GridWidgetWithoutCords => {
+  assertNotUndefined(newWidget.type, 'Widget `type` field is undefined')
+  assert(newWidget.type in GRID_WIDGET_TYPE.enum, 'Invalid widget `type` filed')
+
+  // TODO add validation for properties based on widget type
+
+  return {
+    ...newWidget,
+    type: newWidget.type,
+    w: newWidget.w || 1,
+    h: newWidget.h || 1,
+    i: newWidget.i || generateItemId(),
+    properties: newWidget.properties || {},
+  }
+}
diff --git a/domains/grid/utils/findBestPosition.ts b/domains/grid/utils/findBestPosition.ts
new file mode 100644
index 00000000..9b5aff97
--- /dev/null
+++ b/domains/grid/utils/findBestPosition.ts
@@ -0,0 +1,28 @@
+/**
+ * Find the best position for a widget in the grid
+ *
+ * @param widget
+ * @param columnHeights
+ * @param gridColumns
+ */
+export const findBestPosition = (
+  widget: GridWidgetWithoutCords,
+  columnHeights: number[],
+  gridColumns: number
+): { x: number; y: number } => {
+  let bestY = Number.MAX_SAFE_INTEGER
+  let bestX = 0
+
+  // Iterate to strictly find left-to-right placement
+  for (let x = 0; x <= gridColumns - widget.w; x++) {
+    const maxY = Math.max(...columnHeights.slice(x, x + widget.w))
+
+    // Find the earliest leftmost column available
+    if (maxY < bestY || (maxY === bestY && x < bestX)) {
+      bestY = maxY
+      bestX = x
+    }
+  }
+
+  return { x: bestX, y: bestY }
+}
diff --git a/domains/grid/utils/generateItemId.ts b/domains/grid/utils/generateItemId.ts
new file mode 100644
index 00000000..539e699f
--- /dev/null
+++ b/domains/grid/utils/generateItemId.ts
@@ -0,0 +1,10 @@
+import { v4 as uuidv4 } from 'uuid'
+
+/**
+ * Generate unique item id
+ *
+ * @returns
+ */
+export const generateItemId = (): string => {
+  return uuidv4()
+}
diff --git a/domains/grid/utils/getColumnHeightsFromGrid.ts b/domains/grid/utils/getColumnHeightsFromGrid.ts
new file mode 100644
index 00000000..aa8b94d2
--- /dev/null
+++ b/domains/grid/utils/getColumnHeightsFromGrid.ts
@@ -0,0 +1,29 @@
+/**
+ * Get the heights of each column in a grid
+ *
+ * @param grid
+ * @param gridColumns
+ */
+export const getColumnHeightsFromGrid = (
+  grid: GridWidget[],
+  gridColumns: number
+): number[] => {
+  const columnHeights = Array(gridColumns).fill(0)
+
+  // Filter widgets that impact column heights most
+  const sortedWidgets = grid.slice().sort((a, b) => b.y + b.h - (a.y + a.h))
+
+  // Iterate through the sorted widgets until all columns are covered
+  for (const widget of sortedWidgets) {
+    for (let x = widget.x; x < widget.x + widget.w; x++) {
+      if (columnHeights[x] < widget.y + widget.h) {
+        columnHeights[x] = widget.y + widget.h
+      }
+    }
+
+    // Early exit if all columns have been covered
+    if (Math.min(...columnHeights) > 0) break
+  }
+
+  return columnHeights
+}
diff --git a/domains/grid/utils/getUserGrid.ts b/domains/grid/utils/getUserGrid.ts
new file mode 100644
index 00000000..1fcaa2ef
--- /dev/null
+++ b/domains/grid/utils/getUserGrid.ts
@@ -0,0 +1,11 @@
+/**
+ * Get grid for a given user address
+ *
+ * @param address
+ */
+export const getUserGrid = async (address: Address): Promise<Grid[]> => {
+  const userConfig = await getGridConfig(address)
+  const purifiedConfig = await purifyGridConfig(userConfig)
+
+  return configToGrid(purifiedConfig)
+}
diff --git a/domains/grid/utils/gridConfig.ts b/domains/grid/utils/gridConfig.ts
new file mode 100644
index 00000000..dca7b175
--- /dev/null
+++ b/domains/grid/utils/gridConfig.ts
@@ -0,0 +1,128 @@
+import ERC725, { type ERC725JSONSchema } from '@erc725/erc725.js'
+import UniversalProfileContract from '@lukso/lsp-smart-contracts/artifacts/UniversalProfile.json'
+
+import { AuthenticatedFormDataUploader } from '@/services/ipfs/authenticated-formdata-client'
+import { BaseFormDataUploader } from '@/services/ipfs/formdata-base-client'
+import LSP28TheGrid from '@/shared/schemas/LSP28TheGrid.json'
+
+import type { UniversalProfile } from '@/contracts/UniversalProfile'
+import type { DecodeDataOutput } from '@erc725/erc725.js/build/main/src/types/decodeData'
+import type { AbiItem } from 'web3-utils'
+
+let uploadProvider: BaseFormDataUploader | undefined
+const dataKey = ERC725.encodeKeyName('LSP28TheGrid')
+
+/**
+ * Get the IPFS upload provider
+ *
+ * @returns
+ */
+const getUploadProvider = () => {
+  if (!uploadProvider) {
+    uploadProvider = new AuthenticatedFormDataUploader(IPFS_CLIENT_URL, {})
+  }
+  return uploadProvider
+}
+
+/**
+ * Get the grid config for a given address
+ *
+ * @param address
+ * @returns
+ */
+export const getGridConfig = async (address: Address) => {
+  const { contract } = useWeb3(PROVIDERS.RPC)
+  const universalProfileContract = contract<UniversalProfile>(
+    UniversalProfileContract.abi as AbiItem[],
+    address
+  )
+
+  // read encoded config url to UP
+  const getDataValue = await universalProfileContract?.methods
+    .getData(dataKey)
+    .call()
+
+  if (!getDataValue) {
+    return []
+  }
+
+  // decode config
+  const decodedData = ERC725.decodeData(
+    [
+      {
+        value: getDataValue,
+        keyName: 'LSP28TheGrid',
+      },
+    ],
+    LSP28TheGrid as ERC725JSONSchema[]
+  )
+  const [decodedJsonUrl] = decodedData as DecodeDataOutput[]
+  const { url } = decodedJsonUrl.value as VerifiableURI
+
+  if (gridLog.enabled) {
+    gridLog('Grid config URL', resolveUrl(url))
+  }
+
+  // fetch config file from IPFS
+  const config = await fetcher<GridConfig[], Record<string, never>>({
+    url: resolveUrl(url),
+    method: 'GET',
+  })
+
+  if (gridLog.enabled) {
+    gridLog('Grid config from IPFS', config)
+  }
+
+  return config || []
+}
+
+/**
+ * Save the grid config for a given address
+ *
+ * @param address
+ * @param config
+ * @param saveCallback
+ */
+export const saveConfig = async (address: Address, config: GridConfig[]) => {
+  // convert config to blob
+  const blob = new Blob([JSON.stringify(config, null, 2)], {
+    type: 'application/json',
+  })
+
+  // upload blob to IPFS
+  const uploadProvider = getUploadProvider()
+  const url = await uploadProvider.upload(blob)
+
+  if (gridLog.enabled) {
+    gridLog('Config IPFS url', resolveUrl(url))
+  }
+
+  // encode uploaded config url
+  const encodedData = ERC725.encodeData(
+    [
+      {
+        value: {
+          json: config,
+          url,
+        },
+        keyName: 'LSP28TheGrid',
+      },
+    ],
+    LSP28TheGrid as ERC725JSONSchema[]
+  )
+  const [encodedJsonUrl] = encodedData.values
+
+  if (gridLog.enabled) {
+    gridLog('Config encoded JSON url', encodedJsonUrl)
+  }
+
+  const { providerWeb3Instance } = useBaseProvider()
+  const { contract } = providerWeb3Instance.value
+  const universalProfileContract = contract<UniversalProfile>(
+    UniversalProfileContract.abi as AbiItem[],
+    address
+  )
+
+  // save encoded config url to UP
+  return universalProfileContract?.methods.setData(dataKey, encodedJsonUrl)
+}
diff --git a/domains/grid/utils/gridToConfig.ts b/domains/grid/utils/gridToConfig.ts
new file mode 100644
index 00000000..96f21c34
--- /dev/null
+++ b/domains/grid/utils/gridToConfig.ts
@@ -0,0 +1,39 @@
+/**
+ * Convert grid to LSP27 config
+ *
+ * @param _grid
+ */
+export const gridToConfig = (_grid: Grid[]): GridConfig[] => {
+  const convertGrid = (gridWidgets: GridWidget[]): GridConfigWidget[] => {
+    // remove "add content" widget from grid before saving
+    const gridWithoutAddContentWidget = gridWidgets.filter(
+      item => item.type !== GRID_WIDGET_TYPE.enum.ADD_CONTENT
+    )
+
+    // sort by y and then x to get the correct order
+    const orderedGrid = gridWithoutAddContentWidget.sort((a, b) => {
+      if (a.y === b.y) {
+        return a.x - b.x
+      }
+
+      return a.y - b.y
+    })
+
+    return orderedGrid.map(item => {
+      return {
+        type: item.type,
+        width: item.originalWidth || item.w,
+        height: item.h,
+        properties: item.properties,
+      }
+    })
+  }
+
+  return _grid.map(item => {
+    return {
+      title: item.title,
+      grid: convertGrid(item.grid),
+      gridColumns: item.gridColumns,
+    }
+  })
+}
diff --git a/domains/grid/utils/placeWidgetInGrid.ts b/domains/grid/utils/placeWidgetInGrid.ts
new file mode 100644
index 00000000..e8c385c2
--- /dev/null
+++ b/domains/grid/utils/placeWidgetInGrid.ts
@@ -0,0 +1,31 @@
+/**
+ * Place a widget in a grid
+ *
+ * @param widget
+ * @param grid
+ * @param gridColumns
+ */
+export const placeWidgetInGrid = (
+  widget: GridWidgetWithoutCords,
+  gridWidgets: GridWidget[],
+  gridColumns: number
+): void => {
+  const columnHeights = getColumnHeightsFromGrid(gridWidgets, gridColumns)
+  const w = Math.min(widget.w, gridColumns)
+
+  const { x, y } = findBestPosition(
+    { ...widget, w },
+    columnHeights,
+    gridColumns
+  )
+
+  const newWidget: GridWidget = {
+    ...widget,
+    x,
+    y,
+    w,
+    originalWidth: w < widget.w ? widget.w : undefined,
+  }
+
+  gridWidgets.push(newWidget)
+}
diff --git a/domains/grid/utils/purifyGridConfig.ts b/domains/grid/utils/purifyGridConfig.ts
new file mode 100644
index 00000000..c833911b
--- /dev/null
+++ b/domains/grid/utils/purifyGridConfig.ts
@@ -0,0 +1,97 @@
+import { z } from 'zod'
+
+const filterValidWidgetSchema = z.array(z.unknown()).transform(
+  async widgetItems =>
+    await widgetItems.reduce<Promise<unknown[]>>(
+      async (accPromise, widgetItem) => {
+        const acc = await accPromise
+        // validate widget structure without properties
+        const widgetValidation = await gridConfigWidgetSchema
+          .omit({ properties: true })
+          .safeParseAsync(widgetItem)
+
+        if (
+          widgetValidation.success &&
+          typeof widgetItem === 'object' &&
+          widgetItem &&
+          'type' in widgetItem &&
+          'properties' in widgetItem
+        ) {
+          // validate widget properties
+          const schema = WIDGET_SCHEMA_MAP[widgetItem.type as GridWidgetType]
+          const propertyValidation = await schema?.output?.safeParseAsync(
+            widgetItem.properties
+          )
+
+          if (propertyValidation?.success) {
+            acc.push({
+              ...widgetValidation.data,
+              properties: propertyValidation.data,
+            })
+          } else {
+            console.warn(
+              'Invalid properties',
+              propertyValidation?.error,
+              widgetItem
+            )
+          }
+        } else {
+          console.warn('Invalid widget', widgetValidation.error, widgetItem)
+        }
+
+        return acc
+      },
+      Promise.resolve([])
+    )
+)
+
+const filterValidConfigSchema = z.array(z.unknown()).transform(
+  async configItems =>
+    await configItems.reduce<Promise<unknown[]>>(
+      async (accPromise, configItem) => {
+        const acc = await accPromise
+
+        // first we validate the grid config item
+        const configValidation = await gridConfigSchema
+          .omit({ grid: true })
+          .safeParseAsync(configItem)
+        const validGridConfig = configValidation.data as GridConfig
+
+        if (configValidation.success) {
+          const widgets = (configItem as GridConfig)?.grid || []
+          // then we validate the widgets
+          const widgetValidation =
+            await filterValidWidgetSchema.safeParseAsync(widgets)
+
+          if (widgetValidation.success) {
+            validGridConfig.grid = widgetValidation.data as GridConfigWidget[]
+          }
+
+          acc.push(validGridConfig)
+        }
+
+        return acc
+      },
+      Promise.resolve([])
+    )
+)
+
+/**
+ * Purify grid config to only include valid items based on the schema
+ * - config item fields (title, gridColumns) are recreated from defaults
+ * - some widget fields are recreated (width, height)
+ * - widgets that miss important fields (type, properties) are removed
+ *
+ * @param config
+ */
+export const purifyGridConfig = async (
+  config: unknown
+): Promise<GridConfig[]> => {
+  const validation = await filterValidConfigSchema.safeParseAsync(config)
+
+  if (!validation.success) {
+    console.warn('Invalid grid config', validation.error, config)
+  }
+
+  return validation.data as GridConfig[]
+}
diff --git a/domains/grid/utils/updateColumnHeights.ts b/domains/grid/utils/updateColumnHeights.ts
new file mode 100644
index 00000000..86f8de53
--- /dev/null
+++ b/domains/grid/utils/updateColumnHeights.ts
@@ -0,0 +1,18 @@
+/**
+ * Update the column heights array with the new height
+ *
+ * @param columnHeights
+ * @param x
+ * @param width
+ * @param newHeight
+ */
+export const updateColumnHeights = (
+  columnHeights: number[],
+  x: number,
+  width: number,
+  newHeight: number
+): void => {
+  for (let i = x; i < x + width; i++) {
+    columnHeights[i] = newHeight
+  }
+}
diff --git a/domains/rpc/components/NftListCardRpc.vue b/domains/rpc/components/NftListCardRpc.vue
index ba1d937c..96326740 100644
--- a/domains/rpc/components/NftListCardRpc.vue
+++ b/domains/rpc/components/NftListCardRpc.vue
@@ -16,12 +16,7 @@ const token = useToken()(asset)
 const assetImage = useAssetImage(token, false, 260)
 const { showModal } = useModal()
 const { isCreated } = useFilters()
-const viewedProfileAddress = getCurrentProfileAddress()
-const { isMobile } = storeToRefs(useAppStore())
-
-const viewedProfileIsConnected = computed(() =>
-  useProfile().viewedProfileIsConnected(viewedProfileAddress)
-)
+const { isMobile, isViewedProfileConnected } = storeToRefs(useAppStore())
 
 const handleShowAsset = () => {
   // created LSP8 assets should navigate to collection
@@ -65,10 +60,12 @@ const handleSendAsset = (event: Event) => {
 
 const handleBuySellAsset = (event: Event) => {
   event.stopPropagation()
-  window.open(
-    universalPageAssetUrl(props.asset.address, props.asset.tokenId),
-    '_blank'
-  )
+  navigateTo(universalPageAssetUrl(props.asset.address, props.asset.tokenId), {
+    external: true,
+    open: {
+      target: '_blank',
+    },
+  })
 }
 
 const assetTokenId = computed(() => {
@@ -148,7 +145,7 @@ onMounted(() => {
               {{ $formatNumber(getBalance(token)) }}
             </span>
           </div>
-          <AppPlaceholderLine v-else class="my-[1px] h-[12px] w-1/4" />
+          <AppPlaceholderLine v-else class="my-px h-[12px] w-1/4" />
           <NftListCardCreatorsRpc :asset="token" class="mt-4" />
 
           <!-- Buttons -->
@@ -162,13 +159,13 @@ onMounted(() => {
                 variant="secondary"
                 @click="handleBuySellAsset"
               >
-                <span v-if="viewedProfileIsConnected">{{
+                <span v-if="isViewedProfileConnected">{{
                   $formatMessage('button_sell')
                 }}</span>
                 <span v-else>{{ $formatMessage('button_buy') }}</span>
               </lukso-button>
               <lukso-button
-                v-if="viewedProfileIsConnected"
+                v-if="isViewedProfileConnected"
                 :size="isMobile ? 'medium' : 'small'"
                 variant="secondary"
                 @click="handleSendAsset"
diff --git a/domains/rpc/components/ProfileShowcaseCardRpc.vue b/domains/rpc/components/ProfileShowcaseCardRpc.vue
index 37050395..03037bab 100644
--- a/domains/rpc/components/ProfileShowcaseCardRpc.vue
+++ b/domains/rpc/components/ProfileShowcaseCardRpc.vue
@@ -50,7 +50,7 @@ const isLoading = computed(() => {
       variant="profile"
       size="small"
       is-hoverable
-      custom-class="rounded-24 shadow-neutral-drop-shadow"
+      custom-class="rounded-24 shadow-neutral-shadow-round"
       class="transition hover:scale-[1.01]"
       height="230"
     >
diff --git a/domains/rpc/components/TokenListCardRpc.vue b/domains/rpc/components/TokenListCardRpc.vue
index 3b5e198b..627081f9 100644
--- a/domains/rpc/components/TokenListCardRpc.vue
+++ b/domains/rpc/components/TokenListCardRpc.vue
@@ -13,12 +13,7 @@ const target = ref<HTMLElement | null>(null)
 const asset = computed(() => (targetIsVisible.value ? props.asset : null))
 const token = useToken()(asset)
 const assetImage = useAssetImage(token, true, 260)
-const viewedProfileAddress = getCurrentProfileAddress()
-const { isMobile } = storeToRefs(useAppStore())
-
-const viewedProfileIsConnected = computed(() =>
-  useProfile().viewedProfileIsConnected(viewedProfileAddress)
-)
+const { isMobile, isViewedProfileConnected } = storeToRefs(useAppStore())
 
 const handleShowAsset = () => {
   navigateTo(assetRoute(props.asset.address))
@@ -36,7 +31,12 @@ const handleSendAsset = (event: Event) => {
 
 const handleBuySellAsset = (event: Event) => {
   event.stopPropagation()
-  window.open(universalSwapsAssetUrl(props.asset.address), '_blank')
+  navigateTo(universalSwapsAssetUrl(props.asset.address), {
+    external: true,
+    open: {
+      target: '_blank',
+    },
+  })
 }
 
 const isLoadedToken = computed(() => token.value && !token.value.isLoading)
@@ -148,7 +148,7 @@ onMounted(() => {
                   >{{ $formatMessage('button_buy_sell') }}</lukso-button
                 >
                 <lukso-button
-                  v-if="viewedProfileIsConnected"
+                  v-if="isViewedProfileConnected"
                   :size="isMobile ? 'medium' : 'small'"
                   variant="secondary"
                   @click="handleSendAsset"
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 86091581..7ed9310d 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -143,7 +143,7 @@ export default defineNuxtConfig({
     },
     optimizeDeps: {
       // Don't generate source maps for vue files in node_modules.
-      exclude: ['node_modules/**/*.vue'],
+      exclude: isProduction ? ['node_modules/**/*.vue'] : [],
       esbuildOptions: {
         sourcemap: true,
         // Node.js global to browser globalThis
@@ -169,7 +169,14 @@ export default defineNuxtConfig({
     },
   },
   imports: {
-    dirs: ['stores/**', 'shared/**', 'utils/**', 'types/**', 'composables/**'],
+    dirs: [
+      'stores/**',
+      'shared/**',
+      'utils/**',
+      'types/**',
+      'composables/**',
+      'domains/**',
+    ],
   },
   ssr: false,
   spaLoadingTemplate: 'public/loading-template.html',
@@ -184,6 +191,7 @@ export default defineNuxtConfig({
       TRANSAK_API_KEY: process.env.NUXT_PUBLIC_TRANSAK_API_KEY,
       RAMP_API_KEY: process.env.NUXT_PUBLIC_RAMP_API_KEY,
       BUILD_VERSION: process.env.GITHUB_SHA || 'debug',
+      API_SHARED_SECRET: process.env.NUXT_PUBLIC_API_SHARED_SECRET,
     },
   },
   pwa: {
@@ -255,5 +263,5 @@ export default defineNuxtConfig({
       },
     },
   },
-  extends: ['./domains/rpc', './domains/graph'],
+  extends: ['./domains/rpc', './domains/graph', './domains/grid'],
 })
diff --git a/package.json b/package.json
index 5828e7ce..07ba3712 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "lint:fmt:fix": "prettier --write .",
     "lint:types": "tsc --noEmit --project tsconfig.json",
     "lint:biome": "biome check .",
-    "lint:biome:fix": "biome check . --apply",
+    "lint:biome:fix": "biome check . --write",
     "prepare": "npm-run-all nuxt:prepare typechain && husky install",
     "yata-fetch": "dotenv -- yata-fetch --config .yata.json",
     "test": "npm-run-all test:unit:ci test:e2e",
@@ -33,17 +33,18 @@
     "typechain": "typechain --target web3-v1 --out-dir contracts/ './shared/abis/*.json' && typechain --target web3-v1 --out-dir contracts/ './node_modules/@lukso/lsp-smart-contracts/artifacts/*.json'"
   },
   "devDependencies": {
-    "@biomejs/biome": "^1.7.0",
+    "@biomejs/biome": "^1.9.4",
     "@esbuild-plugins/node-globals-polyfill": "0.2.3",
     "@formatjs/intl": "^2.9.9",
     "@google/model-viewer": "^3.4.0",
     "@lukso/lsp-smart-contracts": "0.15.0-rc.5",
-    "@lukso/web-components": "1.88.0",
+    "@lukso/web-components": "1.99.0",
     "@nuxt/test-utils": "^3.13.1",
     "@nuxtjs/algolia": "^1.10.2",
     "@nuxtjs/device": "^3.1.1",
     "@nuxtjs/plausible": "^0.2.4",
     "@nuxtjs/tailwindcss": "^6.11.4",
+    "@pinata/sdk": "^2.1.0",
     "@pinia-orm/nuxt": "^1.7.0",
     "@pinia-plugin-persistedstate/nuxt": "^1.2.0",
     "@pinia/nuxt": "^0.5.1",
@@ -56,13 +57,17 @@
     "@tanstack/vue-query": "^5.25.0",
     "@tanstack/vue-query-devtools": "^5.25.0",
     "@testing-library/vue": "^8.1.0",
+    "@tsndr/cloudflare-worker-jwt": "^2.5.4",
     "@typechain/web3-v1": "^6.0.7",
     "@types/debug": "^4",
     "@types/fs-extra": "11.0.4",
+    "@types/isomorphic-fetch": "^0.0.39",
     "@types/mime-types": "^2",
     "@types/node": "^20.11.24",
     "@types/randombytes": "2.0.3",
     "@types/three": "^0.162.0",
+    "@types/tinycolor2": "^1",
+    "@types/uuid": "^10",
     "@typescript-eslint/eslint-plugin": "7.1.1",
     "@typescript-eslint/parser": "7.1.1",
     "@vitest/ui": "^1.6.0",
@@ -81,14 +86,16 @@
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-json": "3.1.0",
     "eslint-plugin-playwright": "1.5.2",
-    "eslint-plugin-tailwindcss": "^3.14.3",
+    "eslint-plugin-tailwindcss": "^3.17.5",
     "eslint-plugin-testing-library": "6.2.0",
     "eslint-plugin-vue": "9.22.0",
     "ethereum-blockies-base64": "^1.0.2",
+    "form-data": "^4.0.0",
     "fs-extra": "11.2.0",
     "happy-dom": "^14.12.0",
     "https-browserify": "1.0.0",
     "husky": "9.0.11",
+    "isomorphic-fetch": "^3.0.0",
     "lint-staged": "15.2.2",
     "mime-types": "^2.1.35",
     "npm-run-all": "4.1.5",
@@ -99,8 +106,8 @@
     "pinia-orm": "^1.7.2",
     "postcss-custom-properties": "^13.3.5",
     "postcss-html": "^1.6.0",
-    "prettier": "3.2.5",
-    "prettier-plugin-tailwindcss": "^0.5.11",
+    "prettier": "3.3.3",
+    "prettier-plugin-tailwindcss": "^0.5.14",
     "qr-code-styling": "^1.6.0-rc.1",
     "rollup-plugin-polyfill-node": "^0.13.0",
     "sass": "1.71.1",
@@ -115,17 +122,21 @@
     "swiper": "~11.1.4",
     "tailwind-variants": "^0.2.1",
     "three": "^0.162.0",
+    "tinycolor2": "^1.6.0",
     "typechain": "^8.3.2",
     "typescript": "5.3.3",
     "util": "0.12.5",
+    "uuid": "^10.0.0",
     "vitest": "^1.6.0",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0",
+    "vuedraggable": "^4.1.0",
     "web3": "~1.10.4",
     "web3-bzz": "1.10.4",
     "web3-utils": "~1.10.4",
     "web3-validator": "^2.0.4",
-    "yata-fetch": "2.1.5"
+    "yata-fetch": "2.1.5",
+    "zod": "^3.23.8"
   },
   "resolutions": {
     "@tanstack/query-core": "^5.20.5",
@@ -158,7 +169,8 @@
     "@tanstack/query-sync-storage-persister": "^5.25.0",
     "@tanstack/vue-query": "^5.25.0",
     "@vite-pwa/nuxt": "^0.6.0",
-    "@vueuse/core": "^10.9.0",
+    "@vueuse/core": "^11.0.1",
+    "grid-layout-plus": "^1.0.5",
     "js-sha3": "^0.9.3",
     "limiter": "^2.1.0",
     "workbox-core": "^7.0.0",
diff --git a/pages/[profileAddress]/index.vue b/pages/[profileAddress]/index.vue
index 0de646e6..c3f04766 100644
--- a/pages/[profileAddress]/index.vue
+++ b/pages/[profileAddress]/index.vue
@@ -1,8 +1,3 @@
-<script setup lang="ts">
-const { isRpc, isGraph } = storeToRefs(useAppStore())
-</script>
-
 <template>
-  <ProfileViewRpc v-if="isRpc" />
-  <ProfileViewGraph v-if="isGraph" />
+  <ProfileView />
 </template>
diff --git a/pages/[profileAddress]/lyx-details.vue b/pages/[profileAddress]/lyx-details.vue
index bcc7fd4a..33a5010e 100644
--- a/pages/[profileAddress]/lyx-details.vue
+++ b/pages/[profileAddress]/lyx-details.vue
@@ -26,7 +26,10 @@ const handleSendLyx = () => {
 
 const handleBuyLyx = () => {
   if (isTestnet.value) {
-    window.open(TESTNET_FAUCET_URL, '_blank')
+    navigateTo(TESTNET_FAUCET_URL, {
+      external: true,
+      open: { target: '_blank' },
+    })
   } else {
     try {
       assertAddress(viewedProfile.value?.address, 'profile')
diff --git a/pages/contract/[...slug].vue b/pages/contract/[...slug].vue
index b0004726..47a66e76 100644
--- a/pages/contract/[...slug].vue
+++ b/pages/contract/[...slug].vue
@@ -19,7 +19,12 @@ watch(
     }
     // anything that is not LSP7/8 we open in explorer
     if (!isAsset(asset)) {
-      return window.open(explorerContractUrl(asset.address), '_blank')
+      return navigateTo(explorerContractUrl(asset.address), {
+        external: true,
+        open: {
+          target: '_blank',
+        },
+      })
     }
 
     navigateTo(assetRoute(asset.address, asset.tokenId))
diff --git a/pages/index.vue b/pages/index.vue
index 10939760..aae5da61 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -8,7 +8,7 @@ const { isTestnet } = storeToRefs(useAppStore())
 
 <template>
   <AppPageLoader>
-    <div class="mx-auto flex max-w-[1200px] flex-col items-center lg:px-4">
+    <div class="mx-auto flex max-w-[1200px] flex-col items-center">
       <AppTestnetWarning v-if="isTestnet" class="-mb-6" />
       <h1 class="flex flex-col justify-center pt-16 text-center">
         <div class="heading-apax-48-regular">
diff --git a/pages/settings/__tests__/__snapshots__/index.spec.ts.snap b/pages/settings/__tests__/__snapshots__/index.spec.ts.snap
index 02fd8821..4f22d51c 100644
--- a/pages/settings/__tests__/__snapshots__/index.spec.ts.snap
+++ b/pages/settings/__tests__/__snapshots__/index.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`Settings index page > should render the settings index page 1`] = `
 "<div id="test-wrapper">
   <div class="relative">
-    <div class="relative px-4 py-6 sm:py-20 animate-fade-in opacity-100 transition-opacity delay-200  duration-300">
+    <div class="relative px-4 pb-20 pt-6 sm:pt-20 animate-fade-in opacity-100 transition-opacity delay-200  duration-300">
       <div class="mx-auto w-full sm:w-[440px]">
         <h1 class="heading-inter-21-semi-bold pb-4">Settings</h1><!-- Add Missing Assets -->
         <!--v-if-->
diff --git a/pages/settings/data-provider/__tests__/__snapshots__/index.spec.ts.snap b/pages/settings/data-provider/__tests__/__snapshots__/index.spec.ts.snap
index 8dccf574..e2cf62df 100644
--- a/pages/settings/data-provider/__tests__/__snapshots__/index.spec.ts.snap
+++ b/pages/settings/data-provider/__tests__/__snapshots__/index.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`Settings data-provider page > can change setting 1`] = `
 "<div id="test-wrapper">
   <div class="relative">
-    <div class="relative px-4 py-6 sm:py-20 animate-fade-in opacity-100 transition-opacity delay-200  duration-300">
+    <div class="relative px-4 pb-20 pt-6 sm:pt-20 animate-fade-in opacity-100 transition-opacity delay-200  duration-300">
       <div class="mx-auto w-full sm:w-[440px]">
         <h1 class="heading-inter-17-semi-bold group mb-8 flex cursor-pointer items-center gap-1 border-b border-b-neutral-90 pb-6">
           <lukso-icon name="arrow-left-lg" class="transition group-hover:-translate-x-1"></lukso-icon> Data loading mode
@@ -45,7 +45,7 @@ exports[`Settings data-provider page > can change setting 1`] = `
 exports[`Settings data-provider page > can change setting 2`] = `
 "<div id="test-wrapper">
   <div class="relative">
-    <div class="relative px-4 py-6 sm:py-20 animate-fade-in opacity-100 transition-opacity delay-200  duration-300">
+    <div class="relative px-4 pb-20 pt-6 sm:pt-20 animate-fade-in opacity-100 transition-opacity delay-200  duration-300">
       <div class="mx-auto w-full sm:w-[440px]">
         <h1 class="heading-inter-17-semi-bold group mb-8 flex cursor-pointer items-center gap-1 border-b border-b-neutral-90 pb-6">
           <lukso-icon name="arrow-left-lg" class="transition group-hover:-translate-x-1"></lukso-icon> Data loading mode
@@ -87,7 +87,7 @@ exports[`Settings data-provider page > can change setting 2`] = `
 exports[`Settings data-provider page > should render with centralized setting 1`] = `
 "<div id="test-wrapper">
   <div class="relative">
-    <div class="relative px-4 py-6 sm:py-20 animate-fade-in opacity-100 transition-opacity delay-200  duration-300">
+    <div class="relative px-4 pb-20 pt-6 sm:pt-20 animate-fade-in opacity-100 transition-opacity delay-200  duration-300">
       <div class="mx-auto w-full sm:w-[440px]">
         <h1 class="heading-inter-17-semi-bold group mb-8 flex cursor-pointer items-center gap-1 border-b border-b-neutral-90 pb-6">
           <lukso-icon name="arrow-left-lg" class="transition group-hover:-translate-x-1"></lukso-icon> Data loading mode
@@ -129,7 +129,7 @@ exports[`Settings data-provider page > should render with centralized setting 1`
 exports[`Settings data-provider page > should render with decentralized setting 1`] = `
 "<div id="test-wrapper">
   <div class="relative">
-    <div class="relative px-4 py-6 sm:py-20 animate-fade-in opacity-100 transition-opacity delay-200  duration-300">
+    <div class="relative px-4 pb-20 pt-6 sm:pt-20 animate-fade-in opacity-100 transition-opacity delay-200  duration-300">
       <div class="mx-auto w-full sm:w-[440px]">
         <h1 class="heading-inter-17-semi-bold group mb-8 flex cursor-pointer items-center gap-1 border-b border-b-neutral-90 pb-6">
           <lukso-icon name="arrow-left-lg" class="transition group-hover:-translate-x-1"></lukso-icon> Data loading mode
diff --git a/pages/settings/data-provider/__tests__/index.spec.ts b/pages/settings/data-provider/__tests__/index.spec.ts
index 74b3f8c1..50408990 100644
--- a/pages/settings/data-provider/__tests__/index.spec.ts
+++ b/pages/settings/data-provider/__tests__/index.spec.ts
@@ -1,8 +1,7 @@
 import { renderSuspended } from '@nuxt/test-utils/runtime'
 import { createTestingPinia } from '@pinia/testing'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it } from 'vitest'
 
-import { useAppStore } from '@/stores/app'
 import Index from '../index.vue'
 
 describe('Settings data-provider page', () => {
diff --git a/pages/settings/missing-assets/[assetAddress]/add.vue b/pages/settings/missing-assets/[assetAddress]/add.vue
index 4774b529..2a64010e 100644
--- a/pages/settings/missing-assets/[assetAddress]/add.vue
+++ b/pages/settings/missing-assets/[assetAddress]/add.vue
@@ -5,6 +5,8 @@ import type { UniversalProfile } from '@/contracts'
 import type { AbiItem } from 'web3-utils'
 
 const connectedProfile = useProfile().connectedProfile()
+const address = computed(() => connectedProfile.value?.address)
+const assetsData = useProfileAssets()(address.value)
 const assetAddress = useRouter().currentRoute.value.params?.assetAddress
 const isPending = ref(false)
 const { providerWeb3Instance } = useBaseProvider()
@@ -27,11 +29,16 @@ const handleAddAsset = async () => {
     ).filter(([, value]) => value)[0]?.[0]
     const profileAddress = connectedProfile.value?.address
 
+    const filteredAssetsAddresses = assetsData.value
+      ?.filter(asset => asset.isOwned)
+      .map(asset => asset.address)
+      .filter(asset => !!asset)
+
     const { keys, values } = generateAddReceivedAssetKeys(
       assetAddress,
       interfaceId,
       profileAddress,
-      connectedProfile.value?.receivedAssets
+      filteredAssetsAddresses
     )
     const { contract } = providerWeb3Instance.value
     const profileContract = contract<UniversalProfile>(
diff --git a/pages/settings/missing-assets/index.vue b/pages/settings/missing-assets/index.vue
index 343a6327..1c04d238 100644
--- a/pages/settings/missing-assets/index.vue
+++ b/pages/settings/missing-assets/index.vue
@@ -6,6 +6,8 @@ import { balanceOfABI } from '@/shared/abis/balanceOfABI'
 import type { LSP7DigitalAsset as LSP7DigitalAssetInterface } from '@/contracts'
 
 const connectedProfile = useProfile().connectedProfile()
+const address = computed(() => connectedProfile.value?.address)
+const assetsData = useProfileAssets()(address.value)
 const { formatMessage } = useIntl()
 const checkError = ref('')
 const assetAddress = ref('')
@@ -60,7 +62,11 @@ const handleInput = async (customEvent: CustomEvent) => {
   assertAddress(assetAddress.value)
 
   // check if user doesn't already have the asset
-  if (connectedProfile.value?.receivedAssets?.includes(assetAddress.value)) {
+  const filteredAssetsAddresses = assetsData.value
+    ?.filter(asset => asset.isOwned)
+    .map(asset => asset.address)
+    .filter(asset => !!asset)
+  if (filteredAssetsAddresses?.includes(assetAddress.value)) {
     checkError.value = formatMessage('errors_already_owned')
     return
   }
diff --git a/public/images/grid.svg b/public/images/grid.svg
new file mode 100644
index 00000000..98c84b4f
--- /dev/null
+++ b/public/images/grid.svg
@@ -0,0 +1,6 @@
+<svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.5 44H30.5C40.5 44 44.5 40 44.5 30V18C44.5 8 40.5 4 30.5 4H18.5C8.5 4 4.5 8 4.5 18V30C4.5 40 8.5 44 18.5 44Z" stroke="#4F5882" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M24.5 4V44" stroke="#4F5882" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.5 19H24.5" stroke="#4F5882" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M24.5 29H44.5" stroke="#4F5882" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/images/logo-ue.svg b/public/images/logo-ue.svg
new file mode 100644
index 00000000..799e3bc5
--- /dev/null
+++ b/public/images/logo-ue.svg
@@ -0,0 +1,6 @@
+<svg width="827" height="183" viewBox="0 0 827 183" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 124.396C4.57489e-07 113.344 2.1021 103.555 6.30631 95.0257C10.6306 86.6172 16.7568 80.0102 24.6847 75.2054C32.6127 70.4006 41.982 67.998 52.7929 67.998H121.25C125.137 67.998 128.288 71.1492 128.288 75.0365V99.1587C128.288 103.046 125.137 106.197 121.25 106.197H51.1712C47.3276 106.197 43.844 106.918 40.7208 108.359C37.7179 109.921 35.3755 112.023 33.6937 114.666C32.012 117.429 31.1712 120.612 31.1712 124.216C31.1712 127.939 32.012 131.123 33.6937 133.765C35.3755 136.408 37.7179 138.45 40.7208 139.892C43.844 141.453 47.3276 142.234 51.1712 142.234H121.25C125.137 142.234 128.288 145.385 128.288 149.273V173.395C128.288 177.282 125.137 180.433 121.25 180.433H52.7929C41.982 180.433 32.6127 178.031 24.6847 173.226C16.7568 168.421 10.6306 161.814 6.30631 153.406C2.1021 144.997 -4.92681e-07 135.327 0 124.396Z" fill="black"/>
+<path d="M6.30631 31.68C2.1021 40.2089 4.83056e-07 49.9987 0 61.0501C-2.44695e-08 61.61 0.0055132 62.1664 0.0165397 62.7197C0.0306773 63.4288 0.0538782 64.1326 0.0861424 64.8312C0.158303 66.3934 2.3997 66.8797 3.19917 65.5357C3.21257 65.5132 3.20687 65.5241 3.22138 65.5023L3.43346 65.1831C7.69043 58.8904 13.1937 53.7889 19.9433 49.879C28.2508 45.0665 38.0687 42.66 49.3972 42.66H121.25C125.137 42.66 128.288 39.5089 128.288 35.6216V11.6908C128.288 7.80346 125.137 4.65234 121.25 4.65234H52.7929C41.982 4.65234 32.6127 7.05492 24.6847 11.8597C16.7568 16.6645 10.6306 23.2715 6.30631 31.68Z" fill="black"/>
+<path d="M216.218 5.9131C216.218 4.9413 217.006 4.15348 217.978 4.15348H221.469C222.441 4.15348 223.229 4.9413 223.229 5.9131V54.9923C223.229 60.2163 222.004 64.8902 219.555 69.0143C217.106 73.1135 213.694 76.3502 209.32 78.7246C204.971 81.0744 199.91 82.2491 194.136 82.2491C188.388 82.2491 183.326 81.0617 178.952 78.6873C174.578 76.3129 171.167 73.0759 168.717 68.977C166.268 64.8778 165.043 60.2163 165.043 54.9923V5.9131C165.043 4.9413 165.831 4.15348 166.803 4.15348H170.294C171.266 4.15348 172.054 4.9413 172.054 5.9131V54.5049C172.054 58.5791 172.966 62.2159 174.791 65.4152C176.615 68.5896 179.177 71.0889 182.476 72.9137C185.801 74.738 189.687 75.6506 194.136 75.6506C198.585 75.6506 202.472 74.738 205.796 72.9137C209.12 71.0889 211.682 68.5896 213.481 65.4152C215.306 62.2159 216.218 58.5791 216.218 54.5049V5.9131ZM299.321 4.15348C300.293 4.15348 301.081 4.9413 301.081 5.9131V79.1772C301.081 80.1488 300.293 80.9368 299.321 80.9368H295.169C294.598 80.9368 294.061 80.6588 293.732 80.1914L249.012 16.8057C248.938 16.7007 248.817 16.6383 248.689 16.6383C248.47 16.6383 248.293 16.8153 248.293 17.0335V79.1772C248.293 80.1488 247.506 80.9368 246.534 80.9368H243.042C242.07 80.9368 241.283 80.1488 241.283 79.1772V5.9131C241.283 4.9413 242.07 4.15348 243.042 4.15348H247.158C247.729 4.15348 248.265 4.4308 248.595 4.89724L293.465 68.3598C293.539 68.4646 293.659 68.5269 293.788 68.5269C294.006 68.5269 294.182 68.3499 294.182 68.1317V5.9131C294.182 4.9413 294.97 4.15348 295.942 4.15348H299.321ZM324.423 4.15348C325.395 4.15348 326.183 4.9413 326.183 5.9131V79.1772C326.183 80.1488 325.395 80.9368 324.423 80.9368H320.931C319.96 80.9368 319.172 80.1488 319.172 79.1772V5.9131C319.172 4.9413 319.96 4.15348 320.931 4.15348H324.423ZM343.143 4.15348C343.889 4.15348 344.553 4.62281 344.802 5.32507L368.269 71.5077C368.336 71.6985 368.515 71.8262 368.719 71.8262C368.92 71.8262 369.103 71.6985 369.17 71.5077L392.635 5.3251C392.882 4.62281 393.547 4.15348 394.293 4.15348H397.886C399.107 4.15348 399.955 5.36702 399.54 6.51464L372.886 79.7786C372.636 80.474 371.975 80.9368 371.236 80.9368H366.203C365.464 80.9368 364.803 80.474 364.549 79.7786L337.897 6.51468C337.48 5.36705 338.33 4.15348 339.551 4.15348H343.143ZM412.994 80.9368C412.022 80.9368 411.234 80.1488 411.234 79.1772V5.9131C411.234 4.9413 412.022 4.15348 412.994 4.15348H454.016C454.988 4.15348 455.776 4.9413 455.776 5.9131V8.69259C455.776 9.66442 454.988 10.4522 454.016 10.4522H420.007C419.036 10.4522 418.248 11.24 418.248 12.2118V37.5989C418.248 38.5705 419.036 39.3585 420.007 39.3585H451.652C452.623 39.3585 453.411 40.1465 453.411 41.1181V43.8972C453.411 44.8689 452.623 45.6569 451.652 45.6569H420.007C419.036 45.6569 418.248 46.4448 418.248 47.4165V72.8785C418.248 73.8501 419.036 74.6381 420.007 74.6381H454.766C455.737 74.6381 456.526 75.426 456.526 76.3977V79.1772C456.526 80.1488 455.737 80.9368 454.766 80.9368H412.994ZM473.358 80.9368C472.386 80.9368 471.598 80.1488 471.598 79.1772V5.9131C471.598 4.9413 472.386 4.15348 473.358 4.15348H496.38C501.828 4.15348 506.378 5.14098 510.027 7.11527C513.701 9.06492 516.46 11.7768 518.311 15.251C520.187 18.7002 521.123 22.6622 521.123 27.1362C521.123 31.6102 520.187 35.5591 518.311 38.9833C516.46 42.4076 513.712 45.0822 510.062 47.0068C506.413 48.9312 501.891 49.8937 496.493 49.8937H477.144C476.173 49.8937 475.385 49.1057 475.385 48.134V45.2419C475.385 44.2703 476.173 43.4823 477.144 43.4823H496.303C500.304 43.4823 503.626 42.82 506.276 41.4954C508.95 40.1707 510.939 38.2837 512.237 35.834C513.564 33.3846 514.226 30.4854 514.226 27.1362C514.226 23.7869 513.564 20.8624 512.237 18.3631C510.914 15.8384 508.915 13.8891 506.241 12.5141C503.591 11.1395 500.24 10.4522 496.193 10.4522H480.368C479.397 10.4522 478.608 11.24 478.608 12.2118V79.1772C478.608 80.1488 477.82 80.9368 476.849 80.9368H473.358ZM504.407 46.2942C505.051 46.2942 505.642 46.6458 505.952 47.2113L522.925 78.3347C523.565 79.5073 522.717 80.9368 521.38 80.9368H517.298C516.65 80.9368 516.056 80.5821 515.749 80.0134L498.942 48.89C498.309 47.7174 499.157 46.2942 500.49 46.2942H504.407ZM579.161 23.3495C578.257 23.3495 577.51 22.6603 577.334 21.7724C576.645 18.2309 574.832 15.3574 571.908 13.1515C568.558 10.6271 564.345 9.36476 559.271 9.36476C555.699 9.36476 552.549 9.97711 549.825 11.2021C547.126 12.4268 545.001 14.1263 543.452 16.3008C541.925 18.4504 541.165 20.8997 541.165 23.6493C541.165 25.6739 541.601 27.4483 542.477 28.9732C543.35 30.4977 544.525 31.8101 546 32.9098C547.499 33.9846 549.15 34.9094 550.948 35.6841C552.774 36.459 554.611 37.109 556.459 37.6337L564.56 39.9582C567.009 40.6332 569.459 41.4954 571.908 42.5452C574.357 43.5949 576.592 44.9196 578.619 46.5194C580.667 48.0939 582.304 50.0309 583.528 52.3304C584.777 54.6052 585.404 57.3421 585.404 60.5411C585.404 64.6403 584.341 68.327 582.216 71.6013C580.094 74.8756 577.042 77.4749 573.069 79.3996C569.096 81.2993 564.335 82.2491 558.785 82.2491C553.563 82.2491 549.023 81.3866 545.177 79.6621C541.327 77.9124 538.304 75.5006 536.104 72.4262C534.25 69.8347 533.078 66.8968 532.592 63.613C532.441 62.6051 533.254 61.7411 534.274 61.7411H537.966C538.884 61.7411 539.634 62.4464 539.799 63.347C540.225 65.6827 541.154 67.7094 542.59 69.4268C544.339 71.5264 546.612 73.1259 549.414 74.2256C552.211 75.3004 555.336 75.8378 558.785 75.8378C562.61 75.8378 566.006 75.2005 568.984 73.9258C571.982 72.6261 574.333 70.8264 576.029 68.5269C577.757 66.2025 578.619 63.5032 578.619 60.4288C578.619 57.8292 577.943 55.655 576.592 53.9052C575.244 52.1305 573.358 50.6433 570.933 49.4436C568.533 48.2438 565.746 47.1817 562.572 46.2569L553.387 43.5576C547.362 41.7579 542.688 39.2709 539.363 36.0965C536.041 32.9221 534.38 28.8733 534.38 23.9492C534.38 19.825 535.478 16.2009 537.677 13.0765C539.901 9.92713 542.9 7.47775 546.676 5.72834C550.473 3.95359 554.734 3.06641 559.461 3.06641C564.233 3.06641 568.456 3.94092 572.133 5.69068C575.807 7.44044 578.718 9.85217 580.868 12.9266C582.698 15.4925 583.81 18.3591 584.207 21.5268C584.331 22.5176 583.525 23.3495 582.525 23.3495H579.161ZM600.48 79.7667C600.23 80.4684 599.565 80.9368 598.822 80.9368H595.229C594.008 80.9368 593.157 79.7234 593.575 78.5757L620.226 5.31156C620.479 4.6163 621.141 4.15348 621.88 4.15348H626.912C627.651 4.15348 628.313 4.6163 628.563 5.31156L655.217 78.5757C655.632 79.7234 654.784 80.9368 653.563 80.9368H649.97C649.224 80.9368 648.559 80.4684 648.309 79.767L624.744 13.5111C624.692 13.363 624.551 13.2641 624.393 13.2641C624.238 13.2641 624.097 13.363 624.044 13.5111L600.48 79.7667ZM605.35 53.2654C605.35 52.2938 606.139 51.5058 607.11 51.5058H641.682C642.653 51.5058 643.442 52.2938 643.442 53.2654V56.0446C643.442 57.0162 642.653 57.8042 641.682 57.8042H607.11C606.139 57.8042 605.35 57.0162 605.35 56.0446V53.2654ZM668.67 80.9368C667.699 80.9368 666.911 80.1488 666.911 79.1772V5.9131C666.911 4.9413 667.699 4.15348 668.67 4.15348H672.165C673.136 4.15348 673.925 4.9413 673.925 5.9131V72.8785C673.925 73.8501 674.713 74.6381 675.684 74.6381H708.754C709.725 74.6381 710.513 75.426 710.513 76.3977V79.1772C710.513 80.1488 709.725 80.9368 708.754 80.9368H668.67Z" fill="black"/>
+<path d="M166.803 179.478C165.831 179.478 165.043 178.69 165.043 177.718V104.454C165.043 103.482 165.831 102.694 166.803 102.694H215.021C215.993 102.694 216.78 103.482 216.78 104.454V114.319C216.78 115.291 215.993 116.079 215.021 116.079H183.036C182.064 116.079 181.276 116.867 181.276 117.839V132.615C181.276 133.587 182.064 134.375 183.036 134.375H212.359C213.331 134.375 214.119 135.163 214.119 136.134V146C214.119 146.972 213.331 147.759 212.359 147.759H183.036C182.064 147.759 181.276 148.547 181.276 149.519V164.333C181.276 165.305 182.064 166.093 183.036 166.093H215.171C216.143 166.093 216.93 166.881 216.93 167.853V177.718C216.93 178.69 216.143 179.478 215.171 179.478H166.803ZM239.949 102.694C240.716 102.694 241.394 103.19 241.626 103.92L259.686 160.692C259.75 160.894 259.938 161.032 260.15 161.032C260.362 161.032 260.55 160.894 260.615 160.692L278.711 103.92C278.944 103.19 279.622 102.694 280.388 102.694H294.63C295.838 102.694 296.687 103.885 296.293 105.028L271.038 178.292C270.793 179.001 270.125 179.478 269.374 179.478H250.963C250.212 179.478 249.544 179.002 249.3 178.292L224.008 105.028C223.614 103.886 224.463 102.694 225.672 102.694H239.949ZM305.776 179.478C304.804 179.478 304.016 178.69 304.016 177.718V104.454C304.016 103.482 304.804 102.694 305.776 102.694H353.995C354.967 102.694 355.755 103.482 355.755 104.454V114.319C355.755 115.291 354.967 116.079 353.995 116.079H322.009C321.038 116.079 320.25 116.867 320.25 117.839V132.615C320.25 133.587 321.038 134.375 322.009 134.375H351.332C352.302 134.375 353.091 135.163 353.091 136.134V146C353.091 146.972 352.302 147.759 351.332 147.759H322.009C321.038 147.759 320.25 148.547 320.25 149.519V164.333C320.25 165.305 321.038 166.093 322.009 166.093H354.143C355.114 166.093 355.903 166.881 355.903 167.853V177.718C355.903 178.69 355.114 179.478 354.143 179.478H305.776ZM368.096 179.478C367.125 179.478 366.337 178.69 366.337 177.718V104.454C366.337 103.482 367.125 102.694 368.096 102.694H396.63C402.429 102.694 407.377 103.732 411.477 105.806C415.601 107.856 418.737 110.768 420.887 114.542C423.062 118.291 424.149 122.703 424.149 127.776C424.149 132.875 423.048 137.262 420.848 140.936C418.649 144.585 415.464 147.385 411.287 149.334C407.138 151.284 402.116 152.258 396.218 152.258H377.693C376.722 152.258 375.934 151.471 375.934 150.499V140.971C375.934 139.999 376.722 139.211 377.693 139.211H393.593C396.693 139.211 399.266 138.786 401.317 137.937C403.365 137.087 404.889 135.812 405.889 134.113C406.916 132.413 407.426 130.301 407.426 127.776C407.426 125.227 406.916 123.077 405.889 121.328C404.889 119.578 403.351 118.254 401.278 117.354C399.23 116.429 396.644 115.966 393.519 115.966H384.33C383.359 115.966 382.571 116.754 382.571 117.726V177.718C382.571 178.69 381.782 179.478 380.811 179.478H368.096ZM406.758 144.535C407.402 144.535 407.997 144.887 408.303 145.452L425.462 176.875C426.103 178.047 425.254 179.478 423.917 179.478H410.02C409.369 179.478 408.774 179.12 408.468 178.547L391.678 147.124C391.052 145.952 391.903 144.535 393.23 144.535H406.758ZM427.084 105.319C426.423 104.146 427.271 102.694 428.615 102.694H442.727C443.378 102.694 443.976 103.055 444.282 103.631L461.118 135.431C461.227 135.635 461.438 135.762 461.671 135.762C461.899 135.762 462.11 135.635 462.22 135.431L479.055 103.631C479.361 103.055 479.96 102.694 480.611 102.694H494.722C496.07 102.694 496.915 104.146 496.253 105.319L469.958 151.931C469.807 152.195 469.729 152.492 469.729 152.795V177.718C469.729 178.69 468.941 179.478 467.97 179.478H455.368C454.397 179.478 453.608 178.69 453.608 177.718V152.795C453.608 152.492 453.531 152.195 453.383 151.931L427.084 105.319ZM507.961 116.079C506.99 116.079 506.202 115.291 506.202 114.319V104.454C506.202 103.482 506.99 102.694 507.961 102.694H567.502C568.473 102.694 569.262 103.482 569.262 104.454V114.319C569.262 115.291 568.473 116.079 567.502 116.079H547.513C546.542 116.079 545.754 116.867 545.754 117.839V177.718C545.754 178.69 544.965 179.478 543.994 179.478H531.466C530.495 179.478 529.706 178.69 529.706 177.718V117.839C529.706 116.867 528.918 116.079 527.947 116.079H507.961ZM579.083 179.478C578.112 179.478 577.324 178.69 577.324 177.718V104.454C577.324 103.482 578.112 102.694 579.083 102.694H591.798C592.769 102.694 593.558 103.482 593.558 104.454V132.615C593.558 133.587 594.346 134.375 595.317 134.375H624.752C625.723 134.375 626.511 133.587 626.511 132.615V104.454C626.511 103.482 627.299 102.694 628.271 102.694H640.947C641.918 102.694 642.706 103.482 642.706 104.454V177.718C642.706 178.69 641.918 179.478 640.947 179.478H628.271C627.299 179.478 626.511 178.69 626.511 177.718V149.519C626.511 148.547 625.723 147.759 624.752 147.759H595.317C594.346 147.759 593.558 148.547 593.558 149.519V177.718C593.558 178.69 592.769 179.478 591.798 179.478H579.083ZM668.241 102.694C669.212 102.694 670.001 103.482 670.001 104.454V177.718C670.001 178.69 669.212 179.478 668.241 179.478H655.526C654.555 179.478 653.767 178.69 653.767 177.718V104.454C653.767 103.482 654.555 102.694 655.526 102.694H668.241ZM743.498 102.694C744.469 102.694 745.258 103.482 745.258 104.454V177.718C745.258 178.69 744.469 179.478 743.498 179.478H732.159C731.582 179.478 731.04 179.194 730.713 178.718L697.939 131.309C697.872 131.21 697.76 131.151 697.637 131.151C697.436 131.151 697.271 131.315 697.271 131.518V177.718C697.271 178.69 696.482 179.478 695.511 179.478H682.796C681.825 179.478 681.037 178.69 681.037 177.718V104.454C681.037 103.482 681.825 102.694 682.796 102.694H694.357C694.937 102.694 695.479 102.98 695.807 103.458L728.295 150.793C728.376 150.912 728.513 150.984 728.658 150.984C728.901 150.984 729.098 150.787 729.098 150.544V104.454C729.098 103.482 729.886 102.694 730.857 102.694H743.498ZM808.585 127.514C807.8 127.514 807.117 126.991 806.85 126.253C806.375 124.938 805.773 123.746 805.048 122.678C804.098 121.253 802.936 120.053 801.56 119.078C800.213 118.079 798.661 117.316 796.912 116.791C795.187 116.267 793.276 116.004 791.176 116.004C787.252 116.004 783.803 116.979 780.829 118.928C777.88 120.878 775.579 123.715 773.932 127.439C772.281 131.138 771.454 135.662 771.454 141.011C771.454 146.36 772.267 150.909 773.893 154.658C775.519 158.407 777.817 161.269 780.791 163.244C783.764 165.193 787.276 166.168 791.327 166.168C795.001 166.168 798.136 165.518 800.737 164.219C803.362 162.894 805.361 161.032 806.734 158.632C808.096 156.297 808.796 153.547 808.835 150.383C808.835 150.245 808.958 150.14 809.095 150.16C809.37 150.201 809.341 150.609 809.06 150.609H793.692C792.946 150.609 792.337 150.002 792.337 149.253V140.146C792.337 139.175 793.125 138.387 794.096 138.387H822.707C823.678 138.387 824.467 139.175 824.467 140.146V148.059C824.467 154.808 823.045 160.607 820.194 165.456C817.344 170.28 813.42 174.004 808.423 176.628C803.422 179.228 797.7 180.527 791.249 180.527C784.053 180.527 777.729 178.94 772.281 175.766C766.834 172.567 762.582 168.03 759.535 162.156C756.508 156.258 754.999 149.259 754.999 141.161C754.999 134.937 755.896 129.388 757.698 124.515C759.521 119.616 762.072 115.467 765.345 112.067C768.618 108.668 772.429 106.081 776.779 104.306C781.128 102.532 785.84 101.645 790.915 101.645C795.261 101.645 799.312 102.282 803.06 103.557C806.811 104.807 810.133 106.581 813.033 108.88C815.957 111.18 818.343 113.917 820.194 117.091C821.715 119.682 822.788 122.493 823.414 125.524C823.629 126.57 822.806 127.514 821.736 127.514H808.585Z" fill="black"/>
+</svg>
diff --git a/public/images/resize.svg b/public/images/resize.svg
new file mode 100644
index 00000000..07ce748e
--- /dev/null
+++ b/public/images/resize.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="30" viewBox="0 0 25 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 27.807V2.63158C0.5 1.45434 1.45434 0.5 2.63158 0.5C3.80882 0.5 4.76316 1.45434 4.76316 2.63158V24.4052C4.76316 24.9235 5.18338 25.3438 5.70175 25.3438H22.4219C23.5696 25.3438 24.5 26.2742 24.5 27.4219C24.5 28.5696 23.5696 29.5 22.4219 29.5H7.45614H2.19298C1.25797 29.5 0.5 28.742 0.5 27.807Z" fill="#243542" stroke="#DEE7ED"/>
+</svg>
diff --git a/public/images/social-media-farcaster.svg b/public/images/social-media-farcaster.svg
new file mode 100644
index 00000000..baf89af2
--- /dev/null
+++ b/public/images/social-media-farcaster.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="40" rx="20" fill="#855DCD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7647 32.4663H7.03404V31.512C7.03404 31.0728 7.39013 30.7167 7.82935 30.7167H7.98839V29.7624C7.98839 29.3231 8.34445 28.9671 8.78367 28.9671V14.811H7.90887L6.875 11.3117H11.4877V7.8125H28.8248V11.3117H33.4375L32.4036 14.811H31.5288V28.9671C31.9681 28.9671 32.3241 29.3231 32.3241 29.7624V30.7167H32.4831C32.9224 30.7167 33.2785 31.0728 33.2785 31.512V32.4663H24.5576V31.512C24.5576 31.0728 24.9137 30.7167 25.3529 30.7167H25.5119V29.7624C25.5119 29.3323 25.8533 28.9819 26.2799 28.9676V21.1733C25.9986 18.0522 23.3506 15.6063 20.1562 15.6063C16.9619 15.6063 14.3139 18.0522 14.0326 21.1733V28.9673C14.4637 28.9766 14.8104 29.329 14.8104 29.7624V30.2395V30.7167H14.9694C15.4086 30.7167 15.7647 31.0728 15.7647 31.512V32.4663Z" fill="white"/>
+</svg>
diff --git a/public/images/social-media-instagram.svg b/public/images/social-media-instagram.svg
new file mode 100644
index 00000000..81d3dfd6
--- /dev/null
+++ b/public/images/social-media-instagram.svg
@@ -0,0 +1,27 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="social-media-logos">
+<rect width="40" height="40" rx="20" fill="url(#paint0_linear_372_15587)"/>
+<path id="Vector" d="M19.9997 8.80814C23.6437 8.80814 24.0758 8.82014 25.5158 8.88814C26.8477 8.94814 27.5717 9.17214 28.0517 9.36014C28.6877 9.60814 29.1438 9.90415 29.6198 10.3801C30.0958 10.8561 30.3918 11.3121 30.6397 11.9481C30.8278 12.4281 31.0477 13.1521 31.1117 14.4841C31.1757 15.9241 31.1917 16.3561 31.1917 20.0001C31.1917 23.6441 31.1797 24.0761 31.1117 25.5161C31.0517 26.8481 30.8278 27.5721 30.6397 28.0521C30.3918 28.6881 30.0958 29.1441 29.6198 29.6201C29.1438 30.0961 28.6877 30.3921 28.0517 30.6401C27.5717 30.8281 26.8477 31.0481 25.5158 31.1121C24.0758 31.1761 23.6437 31.1921 19.9997 31.1921C16.3557 31.1921 15.9237 31.1801 14.4837 31.1121C13.1518 31.0521 12.4278 30.8281 11.9478 30.6401C11.3117 30.3921 10.8557 30.0961 10.3797 29.6201C9.90375 29.1441 9.60775 28.6881 9.35975 28.0521C9.17175 27.5721 8.95175 26.8481 8.88775 25.5161C8.82375 24.0761 8.80775 23.6441 8.80775 20.0001C8.80775 16.3561 8.81975 15.9241 8.88775 14.4841C8.94775 13.1521 9.17175 12.4281 9.35975 11.9481C9.60775 11.3121 9.90375 10.8561 10.3797 10.3801C10.8557 9.90415 11.3117 9.60814 11.9478 9.36014C12.4278 9.17214 13.1518 8.95214 14.4837 8.88814C15.9237 8.82014 16.3557 8.80814 19.9997 8.80814ZM19.9997 6.34814C16.2917 6.34814 15.8277 6.36414 14.3717 6.43214C12.9197 6.50014 11.9277 6.72814 11.0557 7.06814C10.1597 7.41214 9.39575 7.88014 8.63975 8.64014C7.87975 9.40014 7.41575 10.1601 7.06375 11.0601C6.72775 11.9281 6.49575 12.9201 6.42775 14.3761C6.35975 15.8321 6.34375 16.2961 6.34375 20.0041C6.34375 23.7121 6.35975 24.1761 6.42775 25.6321C6.49575 27.0841 6.72375 28.0761 7.06375 28.9481C7.41175 29.8401 7.87975 30.6041 8.63975 31.3601C9.39975 32.1201 10.1597 32.5841 11.0597 32.9361C11.9277 33.2721 12.9197 33.5041 14.3757 33.5721C15.8317 33.6401 16.2957 33.6561 20.0037 33.6561C23.7118 33.6561 24.1757 33.6401 25.6317 33.5721C27.0837 33.5041 28.0757 33.2761 28.9477 32.9361C29.8397 32.5881 30.6038 32.1201 31.3598 31.3601C32.1198 30.6001 32.5838 29.8401 32.9358 28.9401C33.2718 28.0721 33.5037 27.0801 33.5717 25.6241C33.6397 24.1681 33.6558 23.7041 33.6558 19.9961C33.6558 16.2881 33.6397 15.8241 33.5717 14.3681C33.5037 12.9161 33.2758 11.9241 32.9358 11.0521C32.5878 10.1601 32.1198 9.39614 31.3598 8.64014C30.5998 7.88014 29.8398 7.41614 28.9398 7.06414C28.0718 6.72814 27.0797 6.49614 25.6237 6.42814C24.1717 6.36414 23.7077 6.34814 19.9997 6.34814Z" fill="white"/>
+<path id="Vector_2" d="M20.0003 12.9878C16.1283 12.9878 12.9883 16.1278 12.9883 19.9998C12.9883 23.8718 16.1283 27.0118 20.0003 27.0118C23.8723 27.0118 27.0123 23.8718 27.0123 19.9998C27.0123 16.1278 23.8723 12.9878 20.0003 12.9878ZM20.0003 24.5518C17.4883 24.5518 15.4483 22.5158 15.4483 19.9998C15.4483 17.4838 17.4883 15.4478 20.0003 15.4478C22.5123 15.4478 24.5523 17.4838 24.5523 19.9998C24.5523 22.5158 22.5123 24.5518 20.0003 24.5518Z" fill="white"/>
+<path id="Vector_3" d="M27.2884 14.3518C28.1942 14.3518 28.9284 13.6175 28.9284 12.7118C28.9284 11.806 28.1942 11.0718 27.2884 11.0718C26.3827 11.0718 25.6484 11.806 25.6484 12.7118C25.6484 13.6175 26.3827 14.3518 27.2884 14.3518Z" fill="white"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_372_15587" x1="5.85786" y1="34.1421" x2="34.1421" y2="5.85786" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFD521"/>
+<stop offset="0.0551048" stop-color="#FFD020"/>
+<stop offset="0.1241" stop-color="#FEC01E"/>
+<stop offset="0.2004" stop-color="#FCA71B"/>
+<stop offset="0.2821" stop-color="#FA8316"/>
+<stop offset="0.3681" stop-color="#F85510"/>
+<stop offset="0.4563" stop-color="#F51E09"/>
+<stop offset="0.5" stop-color="#F30005"/>
+<stop offset="0.5035" stop-color="#F20007"/>
+<stop offset="0.5966" stop-color="#E1003B"/>
+<stop offset="0.6879" stop-color="#D30067"/>
+<stop offset="0.7757" stop-color="#C70088"/>
+<stop offset="0.8589" stop-color="#BF00A0"/>
+<stop offset="0.9357" stop-color="#BB00AF"/>
+<stop offset="1" stop-color="#B900B4"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/images/social-media-linkedin.svg b/public/images/social-media-linkedin.svg
new file mode 100644
index 00000000..09e1317b
--- /dev/null
+++ b/public/images/social-media-linkedin.svg
@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="40" rx="20" fill="#0078B5"/>
+<path d="M9.72328 16.2605H14.0898V30.3129H9.72328V16.2605ZM11.9082 9.27539C13.3046 9.27539 14.4381 10.4089 14.4381 11.8086C14.4381 13.2082 13.3046 14.3417 11.9082 14.3417C10.5085 14.3417 9.37501 13.2082 9.37501 11.8086C9.37172 10.4122 10.5052 9.27539 11.9082 9.27539Z" fill="white"/>
+<path d="M16.8301 16.2607H21.0192V18.1795H21.0783C21.6599 17.0756 23.0825 15.9092 25.2116 15.9092C29.634 15.9092 30.4521 18.8202 30.4521 22.6019V30.3131H26.0855V23.4824C26.0855 21.8495 26.056 19.7566 23.8152 19.7566C21.5416 19.7566 21.1933 21.5308 21.1933 23.3642V30.3164H16.8301V16.2607Z" fill="white"/>
+</svg>
diff --git a/public/images/social-media-soundcloud.svg b/public/images/social-media-soundcloud.svg
new file mode 100644
index 00000000..f2d4193a
--- /dev/null
+++ b/public/images/social-media-soundcloud.svg
@@ -0,0 +1,6 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="social-media-logos">
+<rect width="40" height="40" rx="20" fill="#FF5100"/>
+<path id="Oval-1" d="M5.72837 21.5513L5.5166 23.4037L5.72837 25.2243C5.73623 25.301 5.7841 25.3544 5.84458 25.3544C5.90313 25.3544 5.95083 25.3015 5.96011 25.2251L6.21119 23.4037L5.96011 21.5508C5.95121 21.4744 5.90285 21.4206 5.84458 21.4206C5.78415 21.4206 5.73618 21.4744 5.72837 21.5513ZM7.43081 20.4084C7.43081 20.409 7.14601 23.4035 7.14601 23.4035L7.43081 26.3323C7.43888 26.4109 7.48965 26.4675 7.55138 26.4675C7.61192 26.4675 7.66159 26.4122 7.67155 26.3331L7.99551 23.4035L7.67194 20.4084C7.66201 20.3288 7.61243 20.2738 7.55138 20.2738C7.48999 20.2738 7.43919 20.3306 7.43081 20.4084ZM9.0308 19.7536L8.77547 23.4046L9.0308 26.937C9.03763 27.0464 9.1112 27.129 9.20093 27.129C9.28964 27.129 9.36291 27.0463 9.37077 26.937L9.66118 23.4046L9.37077 19.7528C9.36301 19.6434 9.28976 19.5608 9.20093 19.5608C9.1112 19.5608 9.03804 19.6435 9.0308 19.7536ZM10.6457 20.0179L10.405 23.4047L10.6457 26.9662C10.6527 27.0919 10.7358 27.1869 10.8405 27.1869C10.9436 27.1869 11.0271 27.0918 11.0348 26.9666L11.3084 23.4047L11.0348 20.0164C11.0275 19.8912 10.9439 19.7969 10.8405 19.7969C10.7357 19.7969 10.6523 19.892 10.6457 20.0179ZM12.2613 17.8957L12.0344 23.4061L12.2613 26.9673C12.2672 27.1065 12.3783 27.2162 12.4952 27.2162C12.6115 27.2162 12.7296 27.1059 12.7296 26.9664L12.971 23.4061L12.7071 17.8957C12.7001 17.7558 12.5965 17.6456 12.4802 17.6456C12.3634 17.6456 12.2669 17.7557 12.2613 17.8957ZM13.8756 16.6363C13.8756 16.6368 13.6639 23.4072 13.6639 23.4072L13.8761 26.9459C13.8814 27.1005 13.9886 27.2229 14.12 27.2229C14.2502 27.2229 14.3577 27.1005 14.3639 26.9446L14.6032 23.4072L14.3639 16.6363C14.3574 16.4801 14.2502 16.3581 14.1199 16.3581C13.9886 16.3581 13.8814 16.4803 13.8756 16.6363ZM15.4758 15.8247L15.2933 23.4079L15.4761 26.8886C15.4805 27.0752 15.6375 27.2227 15.7973 27.2227C15.9568 27.2227 16.1187 27.0752 16.1187 26.8875L16.296 23.4081L16.0766 15.8246C16.0715 15.6365 15.9285 15.4887 15.7693 15.4887C15.6092 15.4887 15.4802 15.636 15.4758 15.8247ZM17.0762 16.2896L16.9229 23.4094L17.0762 26.8354C17.0799 27.0536 17.2345 27.2261 17.4233 27.2261C17.6114 27.2261 17.7698 27.0538 17.7698 26.8331L17.9379 23.4098L17.7641 16.2891C17.7595 16.0686 17.6076 15.896 17.4194 15.896C17.231 15.896 17.0798 16.0686 17.0762 16.2896ZM18.713 14.1702L18.5524 23.4112L18.7135 26.7648C18.7163 27.0101 18.9113 27.2118 19.1252 27.2118C19.3387 27.2118 19.5369 27.0099 19.5369 26.7612L19.6923 23.4112L19.5077 14.1695C19.5046 13.9217 19.3193 13.7195 19.1059 13.7195C18.8919 13.7195 18.7163 13.9217 18.713 14.1702ZM29.5424 19.3554C29.2589 15.6583 26.5661 12.7583 23.2816 12.7583C22.4778 12.7583 21.698 12.9404 21.0061 13.2485C20.7372 13.3683 20.6666 13.4917 20.6666 13.7308V26.7503C20.6666 27.0013 20.8351 27.2105 21.0477 27.2351C21.0567 27.2362 30.8584 27.2419 30.9219 27.2419C32.8895 27.2419 34.4838 25.4051 34.4838 23.1395C34.4838 20.8739 32.8879 19.0368 30.9205 19.0368C30.4324 19.0368 29.9665 19.1505 29.5424 19.3553V19.3554Z" fill="white"/>
+</g>
+</svg>
diff --git a/public/images/social-media-spotify.svg b/public/images/social-media-spotify.svg
new file mode 100644
index 00000000..4f2e8032
--- /dev/null
+++ b/public/images/social-media-spotify.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
+  <path fill="#1ed760" d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8Z"/>
+  <path d="M406.6 231.1c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3zm-31 76.2c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm-26.9 65.6c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4z"/>
+</svg>
\ No newline at end of file
diff --git a/public/images/social-media-warpcast.png b/public/images/social-media-warpcast.png
new file mode 100644
index 00000000..3891b879
Binary files /dev/null and b/public/images/social-media-warpcast.png differ
diff --git a/public/images/social-media-x.svg b/public/images/social-media-x.svg
new file mode 100644
index 00000000..c3ae3012
--- /dev/null
+++ b/public/images/social-media-x.svg
@@ -0,0 +1,11 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="40" rx="20" fill="#121B21"/>
+<g clip-path="url(#clip0_372_15589)">
+<path d="M26.901 9.15332H30.581L22.541 18.3433L32 30.8463H24.594L18.794 23.2623L12.156 30.8463H8.474L17.074 21.0163L8 9.15432H15.594L20.837 16.0863L26.901 9.15332ZM25.61 28.6443H27.649L14.486 11.2403H12.298L25.61 28.6443Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_372_15589">
+<rect width="24" height="24" fill="white" transform="translate(8 8)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/images/social-media-youtube.svg b/public/images/social-media-youtube.svg
new file mode 100644
index 00000000..0d984b71
--- /dev/null
+++ b/public/images/social-media-youtube.svg
@@ -0,0 +1,6 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="social-media-logos">
+<rect width="40" height="40" rx="20" fill="#FF0000"/>
+<path id="Vector" d="M32.7277 13.5641C32.4237 12.4121 31.5237 11.5081 30.3797 11.2001C28.3077 10.6401 20.0037 10.6401 20.0037 10.6401C20.0037 10.6401 11.6957 10.6401 9.62773 11.2001C8.48373 11.5081 7.58373 12.4121 7.27973 13.5641C6.71973 15.6481 6.71973 20.0001 6.71973 20.0001C6.71973 20.0001 6.71973 24.3521 7.27573 26.4361C7.57973 27.5881 8.47973 28.4921 9.62373 28.8001C11.6957 29.3601 19.9997 29.3601 19.9997 29.3601C19.9997 29.3601 28.3077 29.3601 30.3757 28.8001C31.5197 28.4921 32.4197 27.5881 32.7237 26.4361C33.2797 24.3521 33.2797 20.0001 33.2797 20.0001C33.2797 20.0001 33.2797 15.6481 32.7277 13.5641ZM17.2837 23.9481V16.0521L24.2237 20.0001L17.2837 23.9481Z" fill="white"/>
+</g>
+</svg>
diff --git a/services/ipfs/authenticated-formdata-client.ts b/services/ipfs/authenticated-formdata-client.ts
new file mode 100644
index 00000000..f6742799
--- /dev/null
+++ b/services/ipfs/authenticated-formdata-client.ts
@@ -0,0 +1,28 @@
+import FormData from 'form-data'
+
+import { CustomHeaderFormDataUploader } from './ipfs-formdata-clients'
+
+import type { FormDataPostHeaders } from '@/services/ipfs/formdata-base-client'
+
+export class AuthenticatedFormDataUploader extends CustomHeaderFormDataUploader {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  async getHeaders(dataContent: FormData, meta?: FormDataPostHeaders) {
+    const jwt = await this.getToken()
+    return { Authorization: `Bearer ${jwt}` }
+  }
+  resolveUrl(result: any): string {
+    return `ipfs://${result.IpfsHash}`
+  }
+  async getToken(): Promise<string> {
+    const sign = await import('@tsndr/cloudflare-worker-jwt').then(
+      m => m.sign || m.default?.sign
+    )
+    const { $config } = useNuxtApp()
+
+    const now = Date.now()
+    return await sign(
+      { iss: 'extension', iat: now / 1000, exp: (now + 120_000) / 1000 },
+      $config.public.API_SHARED_SECRET || ''
+    )
+  }
+}
diff --git a/services/ipfs/formdata-base-client.ts b/services/ipfs/formdata-base-client.ts
new file mode 100644
index 00000000..53a2568c
--- /dev/null
+++ b/services/ipfs/formdata-base-client.ts
@@ -0,0 +1,152 @@
+import { Buffer } from 'buffer'
+import FormData from 'form-data'
+import fetch from 'isomorphic-fetch'
+
+import type { PinataPinResponse } from '@pinata/sdk'
+
+const NOT_IMPLEMENTED = 'Not implemented'
+
+export interface AssetBuffer {
+  buffer: Buffer
+  mimeType: string
+}
+
+export type FormDataPostHeaders = Record<string, string | number | any>
+export type FormDataRequestOptions = {
+  maxContentLength?: number
+  maxBodyLength?: number
+  withCredentials?: boolean
+  headers?: FormDataPostHeaders
+}
+
+export const handleError = (error: any) => {
+  if (error?.response?.data?.error) {
+    return error.response.data.error
+  }
+
+  if (error.data?.error) {
+    return error.data.error
+  }
+
+  if (error.response?.error) {
+    return error.response.error
+  }
+
+  return error
+}
+
+export class BaseFormDataUploader {
+  // Already refactored several times, but still too complex since it needs
+  // to handle both node and browser types.
+  private populate(
+    dataContent: FormData,
+    data: any,
+    _meta?: FormDataPostHeaders
+  ): FormDataPostHeaders | undefined {
+    let meta = _meta
+    if (!('on' in data) && typeof data !== 'string') {
+      if ('size' in data && 'type' in data) {
+        const blob = data
+        meta = {
+          'content-type': blob.type,
+          ...(blob.name ? { name: blob.name } : {}),
+        }
+        dataContent.append('file', blob)
+      } else if ('buffer' in data && 'mimeType' in data) {
+        const assetBuffer = data as AssetBuffer
+        meta = { 'content-type': assetBuffer.mimeType }
+        dataContent.append(
+          'file',
+          new (global.Blob || Blob)([assetBuffer.buffer])
+        )
+      } else if (Buffer.isBuffer(data)) {
+        dataContent.append('file', new (global.Blob || Blob)([data]))
+      } else if ('on' in data && 'pipe' in data) {
+        dataContent.append('file', data)
+      } else {
+        throw new Error('Unknown upload data format')
+      }
+    } else {
+      dataContent.append('file', data)
+    }
+    return meta
+  }
+  async upload(data: any, _meta?: FormDataPostHeaders): Promise<string> {
+    const dataContent = new FormData()
+    let meta = _meta
+    meta = this.populate(dataContent, data, meta)
+    await this.addMetadata(dataContent as FormData, meta)
+    const options = await this.getRequestOptions(dataContent as FormData, meta)
+    // This needs to be in a different files for testing with jest to work
+    // property. Internal access to internal methods in a file cannot be patched.
+    return this.resolveUrl(
+      await this.uploadFormData(options, dataContent as FormData)
+    )
+  }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  async addMetadata(dataContent: FormData, meta?: FormDataPostHeaders) {
+    return
+  }
+  async getRequestOptions(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    dataContent: FormData,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    meta?: FormDataPostHeaders
+  ): Promise<FormDataRequestOptions> {
+    return {
+      maxContentLength: Number.MAX_SAFE_INTEGER,
+      maxBodyLength: Number.MAX_SAFE_INTEGER,
+      withCredentials: true,
+    }
+  }
+  getPostEndpoint(): string {
+    throw new Error(NOT_IMPLEMENTED)
+  }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  resolveUrl(result: any): string {
+    throw new Error(NOT_IMPLEMENTED)
+  }
+  uploadFormData(
+    requestOptions: FormDataRequestOptions,
+    dataContent: FormData
+  ): Promise<any> {
+    const input = {
+      method: 'POST',
+      ...requestOptions,
+    } as RequestInit
+    input.headers = { ...input.headers /* ...headers */ }
+    return (globalThis.fetch || fetch)(this.getEndpoint(), {
+      ...input,
+      body: dataContent as any,
+    })
+      .then(response => {
+        if (response.status !== 200) {
+          return response.text().then(text => {
+            let error = text
+            try {
+              error = JSON.parse(text)
+            } catch {
+              // Ignore
+            }
+            error = (error as any).error || error
+            throw new NetworkError(
+              new Error(
+                `unknown server response while pinning File to IPFS: ${error || response.status}`
+              ),
+              response.status
+            )
+          })
+        }
+        return response.json() as Promise<PinataPinResponse>
+      })
+      .catch(error => {
+        throw handleError(error)
+      })
+  }
+  async getToken(): Promise<string> {
+    throw new Error(NOT_IMPLEMENTED)
+  }
+  getEndpoint(): string {
+    throw new Error(NOT_IMPLEMENTED)
+  }
+}
diff --git a/services/ipfs/ipfs-formdata-clients.ts b/services/ipfs/ipfs-formdata-clients.ts
new file mode 100644
index 00000000..c4870495
--- /dev/null
+++ b/services/ipfs/ipfs-formdata-clients.ts
@@ -0,0 +1,34 @@
+import FormData from 'form-data'
+
+import {
+  BaseFormDataUploader,
+  type FormDataPostHeaders,
+  type FormDataRequestOptions,
+} from '@/services/ipfs/formdata-base-client'
+
+export class CustomHeaderFormDataUploader extends BaseFormDataUploader {
+  constructor(
+    private endpoint: string,
+    private headers: FormDataPostHeaders
+  ) {
+    super()
+  }
+  async getRequestOptions(
+    _dataContent: FormData,
+    meta?: FormDataPostHeaders
+  ): Promise<FormDataRequestOptions> {
+    const rest = await super.getRequestOptions(_dataContent, meta)
+    const headers = await this.getHeaders(_dataContent, meta)
+    return { ...rest, headers: { ...headers } }
+  }
+  getEndpoint(): string {
+    return this.endpoint
+  }
+  async getToken(): Promise<string> {
+    return this.headers.Authorization.replace('Bearer ', '')
+  }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  async getHeaders(dataContent: FormData, meta?: FormDataPostHeaders) {
+    return this.headers
+  }
+}
diff --git a/shared/config.ts b/shared/config.ts
index 83b1b33b..81d29b29 100644
--- a/shared/config.ts
+++ b/shared/config.ts
@@ -8,7 +8,7 @@ export const SUPPORTED_NETWORK_IDS = ['mainnet', 'testnet'] as const
 export const MODAL_DEFAULT_TEMPLATE = 'Default'
 
 // connection expiry time
-export const CONNECTION_EXPIRY_TIME_MS = 1000 * 60 * 60 * 2 // 2 hours
+export const CONNECTION_EXPIRY_TIME_MS = 1000 * 60 * 60 * 24 // 24 hours
 
 // interval to check if the user is still connected
 export const CONNECTION_EXPIRY_CHECK_INTERVAL_MS = 1000 * 10 // 10 seconds
@@ -30,6 +30,7 @@ export const LUKSO_PROXY_API = 'https://api.universalprofile.cloud'
 
 // url of the ipfs gateway
 export const IPFS_URL = `${LUKSO_PROXY_API}/ipfs/`
+export const IPFS_CLIENT_URL = `${LUKSO_PROXY_API}/api/v0/add`
 
 // Tanstack expirations. This is important because the sw.js has to cache longer than and no longer than the GC_TIME.
 export const TANSTACK_GC_TIME = 1000 * 60 * 60 * 24 * 7
@@ -94,3 +95,7 @@ export const PROFILE_SHOWCASE_POOL_SIZE = 500
 // asset showcase params
 export const ASSET_SHOWCASE_LIMIT = 4
 export const ASSET_SHOWCASE_POOL_SIZE = 500
+
+// deep link prefix used by Mobile App
+export const MOBILE_APP_DEEP_LINK_PREFIX =
+  'io.universaleverything.universalprofiles'
diff --git a/shared/enums.ts b/shared/enums.ts
index 05415692..99e14b00 100644
--- a/shared/enums.ts
+++ b/shared/enums.ts
@@ -8,6 +8,7 @@ export enum STORAGE_KEY {
   CONNECTION_EXPIRY = 'connectionExpiry',
   CURRENCY_STORE = 'currency',
   APP_STORE = 'app',
+  GRID_STORE = 'grid',
 }
 
 export enum CACHE_KEY {
diff --git a/shared/errors.ts b/shared/errors.ts
index 8442872c..6bbfe329 100644
--- a/shared/errors.ts
+++ b/shared/errors.ts
@@ -33,3 +33,18 @@ export class NoAccountsError extends Error {
     super('No accounts available')
   }
 }
+
+export class NetworkError extends Error {
+  statusCode: number
+
+  constructor(error: Error, statusCode = 500) {
+    super(`Network error status code: ${statusCode}. Message: ${error.message}`)
+    this.stack = error.stack
+    this.name = error.name
+    this.cause = error.cause
+    this.message = error.message
+    this.statusCode = statusCode
+    // Set the prototype explicitly.
+    Object.setPrototypeOf(this, NetworkError.prototype)
+  }
+}
diff --git a/shared/logger.ts b/shared/logger.ts
index 8db7d25f..f62d0978 100644
--- a/shared/logger.ts
+++ b/shared/logger.ts
@@ -20,3 +20,6 @@ export const followersLog = debug('dapp:followers')
 
 // Logger for sending assets
 export const graphLog = debug('dapp:graph')
+
+// Logger for Grid
+export const gridLog = debug('dapp:grid')
diff --git a/shared/schemas/LSP28TheGrid.json b/shared/schemas/LSP28TheGrid.json
new file mode 100644
index 00000000..2c338fcc
--- /dev/null
+++ b/shared/schemas/LSP28TheGrid.json
@@ -0,0 +1,9 @@
+[
+  {
+    "name": "LSP28TheGrid",
+    "key": "0x724141d9918ce69e6b8afcf53a91748466086ba2c74b94cab43c649ae2ac23ff",
+    "keyType": "Singleton",
+    "valueType": "bytes",
+    "valueContent": "VerifiableURI"
+  }
+]
diff --git a/stores/app.ts b/stores/app.ts
index aabf9133..4915de86 100644
--- a/stores/app.ts
+++ b/stores/app.ts
@@ -1,3 +1,5 @@
+import { useWindowSize } from '@vueuse/core'
+
 import type { Modal } from '@/types/modal'
 import type { NetworkId, NetworkInfo } from '@/types/network'
 import type EthereumProvider from '@walletconnect/ethereum-provider'
@@ -23,7 +25,7 @@ export const useAppStore = defineStore(
     // connection
     const connectedProfileAddress = ref<Address>()
     const walletConnectProvider = ref<EthereumProvider | undefined>()
-    const isWalletConnect = ref(false)
+    const walletConnectSession = ref()
 
     // data provider
     const fetchDataProvider = ref<FetchDataProvider>('graph')
@@ -81,7 +83,11 @@ export const useAppStore = defineStore(
 
     const isMobile = computed(() => {
       const { isMobile } = useDevice()
-      return isMobile
+      const { width } = useWindowSize()
+      const isSmallScreen = width.value < GRID_BREAKPOINT_PX
+
+      // since device plugin check only User-Agent, we need to check also screen width
+      return isMobile || isSmallScreen
     })
 
     const isMobileOrTablet = computed(() => {
@@ -100,6 +106,22 @@ export const useAppStore = defineStore(
       return !!route.query?.modalTemplate
     })
 
+    const isWalletConnect = computed(() => !!walletConnectSession.value)
+
+    const isViewingOwnProfile = computed(() => {
+      const viewedProfileAddress = computed(() => getCurrentProfileAddress())
+
+      return (
+        // we need to compare lowercase addresses in case of checksummed addresses
+        connectedProfileAddress.value?.toLowerCase() ===
+        viewedProfileAddress.value?.toLowerCase()
+      )
+    })
+
+    const isViewedProfileConnected = computed(() => {
+      return isConnected.value && isViewingOwnProfile.value
+    })
+
     // --- actions
 
     const setModal = (newModal: Modal) => {
@@ -130,6 +152,9 @@ export const useAppStore = defineStore(
       fetchDataProviderReset,
       walletConnectProvider,
       isWalletConnect,
+      walletConnectSession,
+      isViewingOwnProfile,
+      isViewedProfileConnected,
     }
   },
   {
@@ -139,7 +164,7 @@ export const useAppStore = defineStore(
         'selectedChainId',
         'fetchDataProvider',
         'fetchDataProviderReset',
-        'isWalletConnect',
+        'walletConnectSession',
       ],
       key: STORAGE_KEY.APP_STORE,
     },
diff --git a/stores/grid.ts b/stores/grid.ts
new file mode 100644
index 00000000..41278373
--- /dev/null
+++ b/stores/grid.ts
@@ -0,0 +1,66 @@
+export const useGridStore = defineStore(
+  'grid',
+  () => {
+    const { connectedProfileAddress } = storeToRefs(useAppStore())
+
+    const isEditingGrid = ref(false)
+    const hasUnsavedGrid = ref(false)
+    const viewedGrid = ref<Grid[]>([])
+    const isSavingGrid = ref(false)
+    const selectedGridId = ref<string | undefined>()
+    const gridRowHeightRatio = ref(DEFAULT_GRID_ROW_HEIGHT_RATIO)
+    const gridChainId = ref<string>(DEFAULT_NETWORK_CHAIN_ID)
+    const tempGrids = ref<Record<string, Grid[]>>({})
+    const mobileLimitationsDisplayed = ref(false)
+
+    // We use tempGrid as a proxy to the actual grid data stored in tempGrids
+    const tempGrid = computed<Grid[]>({
+      get: () => {
+        if (!connectedProfileAddress.value) {
+          return []
+        }
+
+        return (
+          tempGrids.value[connectedProfileAddress.value.toLowerCase()] || []
+        )
+      },
+      set: value => {
+        if (!connectedProfileAddress.value) {
+          return
+        }
+
+        tempGrids.value = {
+          ...tempGrids.value,
+          [connectedProfileAddress.value.toLowerCase()]: value,
+        }
+      },
+    })
+
+    return {
+      isEditingGrid,
+      hasUnsavedGrid,
+      viewedGrid,
+      tempGrid,
+      tempGrids,
+      isSavingGrid,
+      selectedGridId,
+      gridRowHeightRatio,
+      gridChainId,
+      mobileLimitationsDisplayed,
+    }
+  },
+  {
+    persist: {
+      paths: [
+        'isEditingGrid',
+        'hasUnsavedGrid',
+        'selectedGridId',
+        'gridRowHeightRatio',
+        'gridChainId',
+        'mobileLimitationsDisplayed',
+        'tempGrids',
+      ],
+      key: STORAGE_KEY.GRID_STORE,
+    },
+  }
+)
diff --git a/tailwind.config.js b/tailwind.config.js
index 3abefc23..c6fc33d0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -32,6 +32,9 @@ module.exports = {
           '100%': { opacity: '0.2' },
         },
       },
+      backgroundImage: {
+        'dashed-border': `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%239CB6C9FF' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e")`,
+      },
     },
   },
   plugins: [wordBreakPlugin],
diff --git a/tests/e2e/404.spec.ts b/tests/e2e/404.spec.ts
index dcf8ba79..35d21eda 100644
--- a/tests/e2e/404.spec.ts
+++ b/tests/e2e/404.spec.ts
@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { test } from './helpers/fixtures'
 
 test('can access 404 page', async ({ page }) => {
diff --git a/tests/e2e/404.spec.ts-snapshots/404-chrome.png b/tests/e2e/404.spec.ts-snapshots/404-chrome.png
index 57c19756..83dcc314 100644
Binary files a/tests/e2e/404.spec.ts-snapshots/404-chrome.png and b/tests/e2e/404.spec.ts-snapshots/404-chrome.png differ
diff --git a/tests/e2e/index.spec.ts b/tests/e2e/index.spec.ts
index 22040702..fb16bb90 100644
--- a/tests/e2e/index.spec.ts
+++ b/tests/e2e/index.spec.ts
@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { test } from './helpers/fixtures'
 
 test('landing page when no browser extension', async ({ page }) => {
diff --git a/tests/e2e/index.spec.ts-snapshots/landing-no-extension-chrome.png b/tests/e2e/index.spec.ts-snapshots/landing-no-extension-chrome.png
index 0e8d5f11..4363a11f 100644
Binary files a/tests/e2e/index.spec.ts-snapshots/landing-no-extension-chrome.png and b/tests/e2e/index.spec.ts-snapshots/landing-no-extension-chrome.png differ
diff --git a/translations/en_US.json b/translations/en_US.json
index 4ed7563b..65e5e80b 100644
--- a/translations/en_US.json
+++ b/translations/en_US.json
@@ -1,98 +1,147 @@
 {
-  "modal_connect_wallet_select_provider_connect_mobile_button": "Universal Profile mobile app",
+  "modal_connect_wallet_select_provider_connect_mobile_button": "Mobile application",
   "pages_privacy_policy_title": "Privacy Policy",
   "error_pending_request": "You have pending request. Check your browser extension.",
+  "add_widget_text_description": "Use this widget to display and customize any text on your grid.",
   "header_get_lyx": "GET LYXt",
+  "grid_can_reset": "Reset changes",
   "filters_order_by_name_desc": "Title Z-A",
-  "modal_connect_wallet_select_provider_text": "Log in with either the Universal Profile browser extension or with our dedicated mobile app",
+  "modal_connect_wallet_select_provider_text": "Log in with the Universal Profile Browser Extension or Mobile Application.",
   "dapp_showcase_built_on_lukso": "Built on Universal Profiles",
+  "widget_type_elfsight": "Elfsight",
   "connect_or_install_button_connect": "Connect with Universal Profile",
+  "grid_widget_menu_clone_to_my_grid": "Clone to my profile",
   "filters_order_by_recently_added": "Recently added",
   "button_send": "Send",
   "dapp_showcase_05_url": "https://www.de-folio.com/",
   "dapp_showcase_03_url": "https://www.commonground.cg/",
+  "edit_grid_title": "Edit grid",
   "error_rejected_request": "You rejected the request",
   "dapp_showcase_06_image": "/images/universal-grave-dapp.jpg",
   "button_create_testnet_profile": "CREATE A TESTNET PROFILE",
+  "grid_mobile_limitations_title": "Editing on mobile",
   "modal_switch_network_title": "Change extension network",
   "hero_title_01": "Discover",
   "modal_follower_title": "Followers",
+  "add_widget_text_title": "Add custom text",
   "missing_assets_check_button": "Continue",
   "profile_card_followers": "Followers",
+  "grid_tabs_copy_of": "Copy of {title}",
   "view_entire_collection": "View entire collection",
+  "grid_tabs_menu_duplicate": "Duplicate",
   "settings_add_missing_assets_description": "Easily add assets that you have been sent or are missing from your profile.",
   "tooltip_text_copy": "Copy",
   "share_link_copied": "Copied!",
+  "add_widget_iframe_title": "Add website",
   "asset_filter_creator_placeholder": "Creator",
+  "grid_add_widget": "Add new content",
   "header_relayer_dashboard": "Dashboard",
   "shuffle_assets_title": "Collectibles",
   "header_settings": "Settings",
   "token_details_collection_of": "Collection of {count}",
   "header_buy_lyx": "BUY LYX",
+  "grid_tabs_menu_delete": "Delete",
   "token_details_send_collectible": "Send collectible",
+  "add_widget_text_background_color_label": "Background color",
   "pages_terms_content": "<p>PLEASE READ THESE TERMS OF USE BEFORE USING THE WEBSITE.</p>\n<ol role=\"list\"><li><p class='heading-inter-17-semi-bold py-4'>Acceptance of the Terms of Use</p></li></ol>\n\n<p>These terms of use are entered into by and between you and the Universal Everything GmbH (\"Company\", \"we\" or \"us\"). The following terms and conditions, together with any documents they expressly incorporate by reference (collectively, these \"Terms of Use\"), govern your access to and use of lukso.network, including any content, functionality and services offered on or through lukso.network, new-creative-economies.foundation, and lukso.tech (together, the \"Website\").</p>\n<p>Nothing in these Terms creates any relationship of employment, agency, or partnership between the involved parties.</p>\n<p>This Website is provided by:</p>\n\n<p class='py-4'>Universal Everything GmbH <br>Köpenicker Chaussee 3a<br>10317 Berlin</p>\n\n<p>Please read the Terms of Use carefully before you start to use the Website. By using the Website or by clicking to accept or agree to the Terms of Use when this option is made available to you, you accept and agree to be bound and abide by these Terms of Use in addition to</p>\n<ul role=\"list\"><li>our <a href=\"/legal/privacy-policy\">Privacy Policy</a>, incorporated herein by reference; and</li><li>our Cookie Policy, incorporated herein by reference (note: no cookies are used on deposit.lukso.network).</li></ul>\n<p>If you do not agree to these Terms of Use or the Privacy Policy, you must not access or use the Website.</p><ol start=\"2\" role=\"list\"><li>\n\n<p class='heading-inter-17-semi-bold py-4'>Who May Use the Website</p></li></ol><p>This Website is offered and available to users who are 18 years of age or older. The Website is not intended for children under 18 years of age. By using this Website, you represent and warrant that you (i) are 18 years of age or older, (ii) are not barred to use the Website under any applicable law, and (iii) are using the Website only for your own personal use. If you do not meet these requirements, you must not access or use the Website.</p><ol start=\"3\" role=\"list\"><li>\n\n<p class='heading-inter-17-semi-bold py-4'>Changes to the Terms of Use</p></li></ol><p>We may revise and update these Terms of Use from time to time in our sole discretion. All changes are effective immediately when we post them.</p><p>Your continued use of the Website following the posting of revised Terms of Use means that you accept and agree to the changes. You are expected to check this page frequently so you are aware of any changes, as they are binding on you.</p><ol start=\"4\" role=\"list\"><li>\n\n<p class='heading-inter-17-semi-bold py-4'>Accessing the Website and Account Security</p></li></ol><p>We reserve the right to withdraw or amend this Website, and any service or material we provide on the Website, in our sole discretion without notice. We do not guarantee that our site or any content on it, will always be available or be interrupted. We will not be liable if for any reason all or any part of the Website is unavailable at any time or for any period. From time to time, we may restrict access to some parts of the Website, or the entire Website, to users.</p><p>You are responsible for:</p><ul role=\"list\"><li>Making all arrangements necessary for you to have access to the Website.</li><li>Ensuring that all persons who access the Website through your internet connection are aware of these Terms of Use and comply with them.</li></ul><p>To access the Website or some of the resources it offers, you may be asked to provide certain registration details or other information. It is a condition of your use of the Website that all the information you provide on the Website is correct, current and complete. You agree that all information you provide to register using this Website or otherwise, including, but not limited to, using any interactive features on the Website, is governed by our Privacy Policy, and you consent to all actions we take with respect to your information consistent with our Privacy Policy.</p><p>You should use particular caution when inputting personal information on to the Website on a public or shared computer so that others are not able to view or record your personal information.</p><ol start=\"5\" role=\"list\"><li>\n\n<p class='heading-inter-17-semi-bold py-4'>Intellectual Property Rights</p></li></ol><p>The Website and its entire contents, features and functionality (including but not limited to all information, software, text, displays, images, video and audio, and the design, selection and arrangement thereof), are owned by the Company, its licensors or other providers of such material and are protected by copyright, trademark, patent, trade secret and other intellectual property or proprietary rights laws.</p><p>Unless otherwise marked: (a) all material, data, and information on the Website, such as data files, text, music, audio files or other sounds, photographs, videos, or other images, but excluding any software or computer code (collectively, the “Non- Code Content”) is licensed under the Creative Commons Attribution 4.0 International License; and (b) all software or computer code (collectively, the “Code Content”) is licensed under the MIT License.</p><ol start=\"6\" role=\"list\"><li>\n\n<p class='heading-inter-17-semi-bold py-4'>Trademarks</p></li></ol><p>The Company name, the terms LUKSO, the Company logo and all related names, logos, product and service names, designs and slogans are trademarks of the Company or its affiliates or licensors. You must not use such marks without the prior written permission of the Company. All other names, logos, product and service names, designs and slogans on this Website are the trademarks of their respective owners.</p><ol start=\"7\" role=\"list\"><li>\n\n<p class='heading-inter-17-semi-bold py-4'>Prohibited Uses</p></li></ol><p>You may use the Website only for lawful purposes and in accordance with these Terms of Use. You agree not to use the Website:</p><ul role=\"list\"><li>In any way that violates any applicable federal, state, local or international law or regulation (including, without limitation, any laws regarding the export of data or software to and from the US or other countries).</li><li>For the purpose of exploiting, harming or attempting to exploit or harm minors in any way by exposing them to inappropriate content, asking for personally identifiable information or otherwise.</li><li>To send, knowingly receive, upload, download, use or re-use any material which does not comply with these Terms of Use.</li><li>To transmit, or procure the sending of, any advertising or promotional material without our prior written consent, including any \"junk mail\", \"chain letter\" or \"spam\" or any other similar solicitation.</li><li>To impersonate or attempt to impersonate the Company, a Company employee, another user or any other person or entity (including, without limitation, by using e-mail addresses or screen names associated with any of the foregoing).</li><li>To engage in any other conduct that restricts or inhibits anyone's use or enjoyment of the Website, or which, as determined by us, may harm the Company or users of the Website or expose them to liability.</li></ul><p>Additionally, you agree not to:</p><ul role=\"list\"><li>Use the Website in any manner that could disable, overburden, damage, or impair the site or interfere with any other party's use of the Website, including their ability to engage in real time activities through the Website.</li><li>Use any robot, spider or other automatic device, process or means to access the Website for any purpose, including monitoring or copying any of the material on the Website.</li><li>Use any manual process to monitor or copy any of the material on the Website or for any other unauthorized purpose without our prior written consent.</li><li>Use any device, software or routine that interferes with the proper working of the Website.</li><li>Introduce any viruses, trojan horses, worms, logic bombs or other material which is malicious or technologically harmful.</li><li>Attempt to gain unauthorized access to, interfere with, damage or disrupt any parts of the Website, the server on which the Website is stored, or any server, computer or database connected to the Website.</li><li>Attack the Website via a denial-of-service attack or a distributed denial-of-service attack.</li><li>Otherwise attempt to interfere with the proper working of the Website.</li></ul><ol start=\"8\" role=\"list\"><li>\n\n<p class='heading-inter-17-semi-bold py-4'>Reliance on Information Posted</p></li></ol><p>The information presented on or through the Website is made available solely for general information purposes. We do not warrant the accuracy, completeness or usefulness of this information. Any reliance you place on such information is strictly at your own risk. We disclaim all liability and responsibility arising from any reliance placed on such materials by you or any other visitor to the Website, or by anyone who may be informed of any of its contents.</p><p>This Website includes content provided by third parties, including materials provided by other users, bloggers and third-party licensors, syndicators, aggregators and/or reporting services. All statements and/or opinions expressed in these materials, and all articles and responses to questions and other content, other than the content provided by the Company, are solely the opinions and the responsibility of the person or entity providing those materials. These materials do not necessarily reflect the opinion of the Company. We are not responsible, or liable to you or any third party, for the content or accuracy of any materials provided by any third parties.</p><ol start=\"9\" role=\"list\"><li>\n\n<p class='heading-inter-17-semi-bold py-4'>Changes to the Website</p></li></ol><p>We may update the content on this Website from time to time, but its content is not necessarily complete or up-to-date. Any of the material on the Website may be out of date at any given time, and we are under no obligation to update such material.</p><ol start=\"10\" role=\"list\"><li>\n\n<p class='heading-inter-17-semi-bold py-4'>Information About You and Your Visits to the Website</p></li></ol><p>All information we collect on this Website is subject to our <a href=\"/legal/privacy-policy\">Privacy Policy</a>. By using the Website, you consent to all actions taken by us with respect to your information in compliance with the Privacy Policy.</p><ol start=\"11\" role=\"list\"><li>\n\n<p class='heading-inter-17-semi-bold py-4'>Online Purchases and Other Terms and Conditions</p></li></ol><p>Additional terms and conditions may also apply to specific portions, services or features of the Website, including the registration and sponsorship for conference events. All such additional terms and conditions are hereby incorporated by this reference into these Terms of Use. In the event of terms that are directly conflicting between these Terms of Use and terms of conditions for the registration or sponsorship of a conference event, the terms and conditions for the event shall be controlled.</p><ol start=\"12\" role=\"list\"><li>\n\n<p class='heading-inter-17-semi-bold py-4'>Linking to the Website and Social Media Features</p></li></ol><p>You may link to our homepage, provided you do so in a way that is fair and legal and does not damage our reputation or take advantage of it, but you must not establish a link in such a way as to suggest any form of association, approval or endorsement on our part without our express written consent.</p><ol start=\"13\" role=\"list\"><li>\n\n<p class='heading-inter-17-semi-bold py-4'>Links from the Website</p></li></ol><p>If the Website contains links to other sites and resources provided by third parties, these links are provided for your convenience only. This includes links contained in advertisements, including banner advertisements and sponsored links. We have no control over the contents of those sites or resources, and accept no responsibility for them or for any loss or damage that may arise from your use of them. If you decide to access any of the third party Website linked to this Website, you do so entirely at your own risk and subject to the terms and conditions of use for such Website. We reserve the right to withdraw linking permission without notice.</p><ol start=\"14\" role=\"list\"><li>\n\n<p class='heading-inter-17-semi-bold py-4'>Geographic Restrictions</p></li></ol><p>The owner of the Website is based in Switzerland. We make no claims that the Website or any of its content is accessible or appropriate outside of Switzerland. Access to the Website may not be legal by certain persons or in certain countries. If you access the Website from outside Switzerland, you do so on your own initiative and are responsible for compliance with local laws.</p><ol start=\"15\" role=\"list\"><li>\n\n<p class='heading-inter-17-semi-bold py-4'>Disclaimer of Warranties</p></li></ol><p>You understand that we cannot and do not guarantee or warrant that files available for downloading from the internet or the Website will be free of viruses or other destructive code. You are responsible for implementing sufficient procedures and checkpoints to satisfy your particular requirements for anti-virus protection and accuracy of data input and output, and for maintaining a means external to our site for any reconstruction of any lost data. WE WILL NOT BE LIABLE FOR ANY LOSS OR DAMAGE CAUSED BY A DISTRIBUTED DENIAL-OF-SERVICE ATTACK, VIRUSES OR OTHER TECHNOLOGICALLY HARMFUL MATERIAL THAT MAY INFECT YOUR COMPUTER EQUIPMENT, COMPUTER PROGRAMS, DATA OR OTHER PROPRIETARY MATERIAL DUE TO YOUR USE OF THE Website OR ANY SERVICES OR ITEMS OBTAINED THROUGH THE Website OR TO YOUR DOWNLOADING OF ANY MATERIAL POSTED ON IT, OR ON ANY Website LINKED TO IT.</p><p>YOUR USE OF THE WEBSITE, ITS CONTENT AND ANY SERVICES OR ITEMS OBTAINED THROUGH THE Website IS AT YOUR OWN RISK. THE WEBSITE, ITS CONTENT AND ANY SERVICES OR ITEMS OBTAINED THROUGH THE Website ARE PROVIDED ON AN \"AS IS\" AND \"AS AVAILABLE\" BASIS, WITHOUT ANY WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED. NEITHER THE COMPANY NOR ANY PERSON ASSOCIATED WITH THE COMPANY MAKES ANY WARRANTY OR REPRESENTATION WITH RESPECT TO THE COMPLETENESS, SECURITY, RELIABILITY, QUALITY, ACCURACY OR AVAILABILITY OF THE Website. WITHOUT LIMITING THE FOREGOING, NEITHER THE COMPANY NOR ANYONE ASSOCIATED WITH THE COMPANY REPRESENTS OR WARRANTS THAT THE WEBSITE, ITS CONTENT OR ANY SERVICES OR ITEMS OBTAINED THROUGH THE Website WILL BE ACCURATE, RELIABLE, ERROR-FREE OR UNINTERRUPTED, THAT DEFECTS WILL BE CORRECTED, THAT OUR SITE OR THE SERVER THAT MAKES IT AVAILABLE ARE FREE OF VIRUSES OR OTHER HARMFUL COMPONENTS OR THAT THE Website OR ANY SERVICES OR ITEMS OBTAINED THROUGH THE Website WILL OTHERWISE MEET YOUR NEEDS OR EXPECTATIONS.</p><p>THE COMPANY HEREBY DISCLAIMS ALL WARRANTIES OF ANY KIND, WHETHER EXPRESS OR IMPLIED, STATUTORY OR OTHERWISE, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, NON-INFRINGEMENT AND FITNESS FOR PARTICULAR PURPOSE.</p><p>SOME JURISDICTIONS DO NOT ALLOW EXCLUSION OF WARRANTIES OR LIMITATIONS ON THE DURATION OF IMPLIED WARRANTIES, SO THE ABOVE DISCLAIMER MAY NOT APPLY TO YOU IN THEIR ENTIRETIES BUT WILL APPLY TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW.</p><ol start=\"16\" role=\"list\"><li>\n\n<p class='heading-inter-17-semi-bold py-4'>Limitation on Liability</p></li></ol><p>OUR LIABILITY IS EXCLUDED TO THE MAXIMUM EXTENT PERMITTED BY LAW. IN PARTICULAR, BUT WITHOUT LIMITATION, WE ARE NOT LIABLE FOR </p><ul role=\"list\"><li>INDIRECT OR CONSEQUENTIAL DAMAGES, SUCH AS LOSS OF PROFITS, SAVINGS OR CLAIMS BY THIRD PARTIES</li><li>ACTS OR OMISSIONS OF OUR AUXILIARY PERSONS AND SUBCONTRACTORS,</li><li>SIMPLE NEGLIGENCE.</li></ul><p>FURTHERMORE, THE WEBSITE IS MADE AVAILABLE \"AS IS\" AND, WE EXCLUDE ALL CONDITIONS, LIABILITIES, WARRANTIES, REPRESENTATIONS OR OTHER TERMS WHICH MAY APPLY TO OUR WEBSITE OR ANY CONTENT ON IT, WHETHER EXPRESS OR IMPLIED.</p><p>WE ALSO WILL NOT BE LIABLE TO ANY USER FOR ANY LOSS OR DAMAGE, WHETHER IN CONTRACT, TORT, BREACH OF STATUTORY DUTY, OR OTHERWISE, EVEN IF FORESEEABLE, ARISING UNDER OR IN CONNECTION WITH:</p><ul role=\"list\"><li>USE OF, OR INABILITY TO USE, OUR WEBSITE; OR</li><li>USE OF OR RELIANCE ON ANY CONTENT DISPLAYED ON OUR WEBSITE.</li></ul><p>WE WILL NOT BE LIABLE FOR ANY LOSS OR DAMAGE CAUSED BY A VIRUS, DISTRIBUTED DENIAL-OF-SERVICE ATTACK, OR OTHER TECHNOLOGICALLY HARMFUL MATERIAL THAT MAY INFECT YOUR COMPUTER EQUIPMENT, COMPUTER PROGRAMS, DATA OR OTHER PROPRIETARY MATERIAL DUE TO YOUR USE OF OUR WEBSITE OR TO YOUR DOWNLOADING OF ANY CONTENT ON IT, OR ON ANY WEBSITE LINKED TO IT.</p><p>OUR WEBSITE MAY CONTAIN THIRD-PARTY CONTENT OR LINKS TO THIRD PARTY Website OR APPLICATIONS FOR YOUR CONVENIENCE ONLY. YOU UNDERSTAND THAT YOUR USE OF ANY THIRD PARTY WEBSITE OR APPLICATION IS SUBJECT TO ANY TERMS OF USE AND/OR PRIVACY NOTICES PROVIDED BY SUCH THIRD PARTY. WE ASSUME NO RESPONSIBILITY FOR THIRD-PARTY CONTENT OR LINKS TO THIRD PARTY Website OR APPLICATIONS TO WHICH WE LINK FROM OUR WEBSITE. SUCH LINKS SHOULD NOT BE INTERPRETED AS ENDORSEMENT BY US OF THOSE LINKED Website OR APPLICATIONS. WE WILL NOT BE LIABLE FOR ANY LOSS OR DAMAGE THAT MAY ARISE FROM YOUR USE OF THEM.</p><p>THE EXCLUSION OF LIABILITY UNDER THESE TERMS OF USE SHALL NOT APPLY IF THE DAMAGE IS CAUSED WILLFULLY OR BY GROSS NEGLIGENCE BY US OR UNLESS WE SHOULD BE LIABLE OTHERWISE PURSUANT TO MANDATORY LEGAL PROVISIONS SUCH AS PRODUCT LIABILITY PROVISIONS. MOREOVER, THE EXCLUSION OF LIABLITY DOES NOT APPLY TO DAMAGE FROM INJURY TO LIFE, BODY OR HEALTH (PERSONAL INJURIES).</p><ol start=\"17\" role=\"list\"><li>\n\n<p class='heading-inter-17-semi-bold py-4'>Governing Law and Jurisdiction</p></li></ol><p>All matters relating to the Website and these Terms of Use and any dispute or claim arising therefrom or related thereto (in each case, including non-contractual disputes or claims), shall be governed by and construed in accordance with the internal laws of Switzerland without giving effect to any choice or conflict of law provision or rule (whether of Switzerland or any other jurisdiction).</p><p>Any legal suit, action or proceeding arising out of, or related to, these Terms of Use or the Website shall be instituted exclusively in the Switzerland in the Kanton of Zug although we retain the right to bring any suit, action or proceeding against you for breach of these Terms of Use in your country of residence or any other relevant country. You waive any and all objections to the exercise of jurisdiction over you by such courts and to venue in such courts.</p><ol start=\"18\" role=\"list\"><li>\n\n<p class='heading-inter-17-semi-bold py-4'>Waiver and Severability</p></li></ol><p>No waiver of by the Company of any term or condition set forth in these Terms of Use shall be deemed a further or continuing waiver of such term or condition or a waiver of any other term or condition, and any failure of the Company to assert a right or provision under these Terms of Use shall not constitute a waiver of such right or provision.</p><p>If any provision of these Terms of Use is held by a court or other tribunal of competent jurisdiction to be invalid, illegal or unenforceable for any reason, such provision shall be eliminated or limited to the minimum extent such that the remaining provisions of the Terms of Use will continue in full force and effect.</p><ol start=\"19\" role=\"list\"><li>\n\n<p class='heading-inter-17-semi-bold py-4'>Entire Agreement</p></li></ol><p>The Terms of Use, our Privacy Policy and terms of conditions for the registration of events constitute the sole and entire agreement between you and the Company with respect to the Website and supersede all prior and contemporaneous understandings, agreements, representations and warranties, both written and oral, with respect to the Website.</p><ol start=\"20\" role=\"list\"><li>\n\n<p class='heading-inter-17-semi-bold py-4'>Your Comments and Concerns</p></li></ol><h6>This Website is operated by the Company. All other feedback, comments, requests for technical support and other communications relating to the Website should be directed to: <a class=\"underline\" href=\"mailto:support@universaleverything.io\">support@universaleverything.io</a></h6><h2>‍</h2>",
+  "add_widget_warpcast_description": "Use this widget to display any Warpcast feed or post on your grid.",
   "filters_no_options": "No options...",
+  "grid_enable_edit_mode": "Enable edit mode",
   "asset_creators_verified": "Verified creator",
   "create_profile_box_button": "Create your profile",
   "header_title": "UNIVERSAL\nPROFILES",
+  "add_widget_instagram_title": "Add Instagram post",
   "token_asset_type_document": "DOC",
   "token_details_contract_address": "Contract Address",
   "erc725account_info_part2": "based on {erc725accountLink}, or {createUPlink} 🆙",
   "confirm_missing_assets_description": "You own the below asset but it is missing from your profile.",
+  "edit_widget_images_description": "Edit this widget to display images from the web directly on your grid for visitors to view. Please note that uploading an image from your device is not available.",
+  "add_grid_title": "Add a new grid",
   "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.",
   "asset_standard_badge_collection_contract": "LSP8 COLLECTION",
   "tooltip_text_copy_raw": "Copy raw",
+  "add_widget_section_website": "Website",
   "data_provider_graph_description": "Load data via the our Envio indexing service. This results in faster loading times and smoother UX, however inappropriate content might be removed.",
+  "grid_mobile_limitations_confirm": "I understand",
   "transak_success_message": "Please note that it can take some time for your balance to update.",
   "missing_asset_label_added": "Added",
   "error_no_accounts": "Account not found.",
+  "add_widget_text_link_label": "Link",
   "asset_all_creators_unverified": "Un-verified creators",
+  "add_widget_text_text_label": "Description",
+  "add_grid_columns_label": "Number of columns",
+  "edit_widget_text_title": "Edit custom text",
+  "add_widget_description": "Pick the content you'd like to share with anyone visiting your profile, and follow the instructions on the screen.",
   "profile_tab_grid": "Grid",
   "followed_by_empty": "No one is following {username}",
   "dapp_showcase_01_image": "/images/universal-page-dapp.jpg",
   "hero_title_02": "Universal Profiles",
   "not_up_description": "This does not seem to be a Universal Profile address. View this address on block explorer to find out more information.",
   "modal_switch_application_network_title": "Change application network",
+  "add_widget_iframe_instructions": "-",
   "add_missing_assets_add_another_button": "Add another missing asset",
+  "grid_unsaved_changes_text": "You have unsaved changes in your Grid.",
+  "modal_delete_widget_title": "Delete content",
   "send_pending_title": "Sending {amount} {symbol}",
   "collection_no_results": "No results",
   "buy_lyx_title": "Use the below services to <strong>buy LYX</strong> for your Universal Profile",
   "assets_empty_state_title": "No created assets",
+  "edit_widget_images_title": "Edit image",
+  "add_widget_section_social": "Social",
+  "add_widget_spotify_description": "Use this widget to display any Spotify playlist, song, or artist on your grid.",
   "web3_connect_no_extension": "You don't have the Universal Profile browser extension installed.",
   "dapp_showcase_01_title": "universal.page",
+  "add_widget_spotify_title": "Add Spotify music",
   "not_up_title": "Not a Universal Profile",
+  "add_grid_title_label": "Title",
+  "add_widget_text_text_placeholder": "Please add a description text",
   "dapp_showcase_08_url": "https://lsp8.app/",
   "no_asset_balance": "You don't own this asset.",
+  "grid_widget_menu_edit": "Edit",
   "asset_all_creators_partial": "Not all creators are verified",
+  "edit_widget_elfsight_title": "Edit Elfsight widget",
+  "add_widget_confirm": "Save",
   "header_install_extension": "Install Extension",
   "own_connected_profile_following_empty": "You follow no one",
+  "add_widget_section_custom": "Custom",
   "error_same_address": "You cannot send {lyxSymbol} to yourself",
   "profile_card_following_button": "Following",
   "dapp_showcase_01_url": "https://universal.page/",
+  "add_widget_text_title_color_placeholder": "#000000",
   "modal_switch_application_network_confirm": "Yes please",
+  "add_widget_youtube_description": "Use this widget to display any YouTube video on your grid.",
   "confirm_missing_assets_title": "Confirm missing asset",
   "settings_data_provider_description": "Change how the application loads data.",
+  "edit_widget_iframe_description": "Edit this widget to display a custom website directly on your grid, making it easy for visitors to view. Note that certain websites may have security settings that prevent embedding.",
   "own_connected_profile_followers_empty": "No one is following you",
   "filters_type_created": "Created",
   "asset_attributes_title": "Attributes",
+  "add_widget_text_background_color_placeholder": "#000000",
   "web3_connect_error_title": "Can't connect",
+  "grid_widget_menu_move": "Move to other grid",
   "dapp_showcase_02_title": "universalswaps.io",
+  "errors_invalid_hex_color": "Invalid color",
+  "add_widget_youtube_instructions": "1. Find your favorite video on YouTube\n2. Click the \"Share\" button below the video\n3. Select \"Embed\" from the sharing options\n4. Copy the entire code and paste it here",
   "button_get_lyx": "Get",
   "filters_type_owned": "Owned",
   "asset_filter_mobile_filters": "Filters",
   "modal_switch_network_confirm": "Change network",
+  "errors_required": "Field is required",
   "button_buy": "Buy",
   "buy_lyx_widget_title": "Fund your profile with LYX",
   "image_error_missing_message": "IMAGE CAN NOT BE FOUND",
   "send_error_title": "Something went wrong...",
   "errors_get_asset_balance": "Can't get balance for this token. Try a different token contract address",
+  "add_widget_images_title": "Add image",
   "dapp_showcase_07_title": "stakingverse.io",
+  "grid_widget_menu_clone": "Duplicate",
   "add_missing_assets_cancel_button": "Cancel",
   "not_found_title": "Oops!",
   "landing_hero_supported_browsers": "Supported Browsers",
   "button_sell": "Sell",
   "dapp_showcase_03_image": "/images/common-ground-dapp.jpg",
   "success_missing_assets_title": "Check missing asset",
+  "widget_type_spotify": "Spotify",
   "erc725account_info_part3": "create your own",
   "image_error_invalid_documentation_link": "Visit the documentation",
   "modal_connect_wallet_mobile_scan_text": "Scan the below QR code with the Universal Profile mobile app to log in",
@@ -102,89 +151,143 @@
   "dapp_showcase_02_image": "/images/universalswaps-dapp.jpg",
   "asset_links_title": "Links",
   "collection_total_supply": "Created {count}",
+  "edit_widget_x_description": "Edit this widget to display any X timeline or post.",
   "collection_not_avail_link": "in the settings",
+  "add_widget_instagram_description": "Use this widget to display any Instagram post on your grid.",
+  "add_widget_elfsight_input_placeholder": "Add any Elfsight embed code",
   "token_asset_type_other": "OTHER",
   "profile_tab_tokens": "Tokens",
   "modal_mobile_search_placeholder": "Search by title",
+  "widget_type_instagram": "Instagram",
   "add_missing_assets_page_title": "Check missing asset",
-  "modal_connect_wallet_select_provider_title": "Let’s log you in",
+  "modal_connect_wallet_select_provider_title": "Welcome back!",
   "settings_page_title": "Settings",
+  "modal_clone_widget_title": "Widget cloned!",
   "profile_search_placeholder": "Search profiles",
   "follows_empty": "{username} follows no one",
+  "add_widget_youtube_title": "Add YouTube video",
   "token_details_send": "Send {token}",
   "missing_assets_placeholder": "Enter token contract address",
   "dapp_showcase_05_image": "/images/de-folio-dapp.jpg",
   "token_details_token_id": "Token ID",
+  "add_widget_x_input_placeholder": "Add any X post or profile",
   "modal_following_title": "Following",
+  "add_widget_text_text_color_placeholder": "#000000",
+  "edit_widget_spotify_description": "Edit this widget to display any Spotify playlist, song, or artist on your grid.",
   "image_error_invalid_documentation": "{link} to fix this issue",
   "send_button": "Send {amount} {symbol}",
   "asset_supply_title": "Total Token Supply",
   "shuffle_title": "Profiles",
   "token_asset_type_video": "VIDEO",
   "beta_warning": "You are on <strong>LUKSO Testnet</strong>. Do not send real LYX to any profiles made on this network!<br /><strong>If you are looking for LUKSO Mainnet, please use the switch in the footer.</strong>",
+  "edit_widget_elfsight_description": "Use this widget to display Elfsight on your grid.",
+  "add_widget_iframe_input_placeholder": "URL of the webpage",
+  "add_widget_text_link_placeholder": "Link URL",
   "profile_card_follow_button": "Follow",
   "header_discovery": "Discover",
   "asset_all_creators_verified": "Verified creators",
   "not_found_text": "We can’t seem to find the page you’re looking for!",
+  "add_widget_section_video": "Video",
   "dapp_showcase_03_title": "commonground.cg",
+  "add_widget_soundcloud_instructions": "1. Find your favorite playlist, album, track, or artist on Soundcloud\n2. Click the \"Share\" button\n3. Copy the link and paste it here",
+  "add_widget_warpcast_input_placeholder": "Add any Warpcast feed or post",
+  "edit_widget_instagram_title": "Edit Instagram post",
+  "add_widget_section_music": "Music",
+  "add_widget_title": "Add a new content",
   "asset_creations": "Creations",
+  "add_widget_text_title_label": "Title",
+  "edit_widget_spotify_title": "Edit Spotify widget",
   "asset_filter_owned_assets": "Owned assets",
   "asset_address_copied_tooltip": "Copied!",
+  "edit_widget_warpcast_title": "Edit Warpcast content",
   "add_missing_assets_add_button": "Add missing asset",
+  "grid_widget_menu_open_in_new_tab": "Open in new tab",
   "pages_privacy_policy_content": "<p><strong>Last Updated: 08-08-2024</strong></p>\n\n<ol role=\"list\"><li id=\"General-Background\">\n<br>\n<strong>General Background</strong><br><br></li></ol><p>This Privacy Policy describes how the Universal Everything GmbH, Köpenicker Chaussee 3a, 10317 Berlin, incorporated under the laws of Switzerland (also “we”, “us” or “our”) collects, protects, and uses your personal data when you use our website (in this context, the term “website” also includes our web portals or Apps), obtain products or services from us, interact with us in relation to a contract, communicate with us, or otherwise deal with us. We explain what we do with your personal data, for what purposes and on what legal company we do so, and what rights you have on that basis. When appropriate, we will provide just-in-time notice to cover any additional processing activities not mentioned in this Privacy Policy. In addition, we may inform you about the processing of your data separately, for example, in consent forms, terms and conditions, additional Privacy Policies, forms, and other notices. We use the word “data” here interchangeably with “personal data”.</p><p>‍</p><p>If you provide information to us about any person other than yourself, your employees, counterparties, your advisers, or your suppliers, you must ensure that the data is accurate, that they understand how their information will be used, and that they have given their permission for you to disclose it to us and for you to allow us, and our outsourced service providers, to use it.</p><p>‍</p><p>This Privacy Policy is aligned with the EU General Data Protection Regulation (“GDPR”) and the Swiss Data Protection Act (“DPA”). However, the application of these laws depends on each individual case.</p><p>‍</p><ol start=\"2\" role=\"list\"><li id=\"Data-Controller-Protection\" class=\"\">\n\n<strong>The Controller and the Data Protection Officer/Data Protection Advisor</strong></li></ol><p>‍</p><p>The responsible person for processing your data under this Privacy Policy (“Controller”) unless we tell you otherwise in an individual case is:</p><p>‍</p>\n\n<p>Universal Everything GmbH</p><p>Köpenicker Chaussee 3a </p><p>10317 Berlin</p><p>‍</p>\n\n<p>You may contact us regarding data protection matters and to exercise your rights at:&nbsp;&nbsp;</p><p><a class=\"underline\" href=\"mailto:hello@universaleverything.io\">hello@universaleverything.io</a>\n</p><p>‍</p><ol start=\"3\" role=\"list\"><li><strong>Data processed by us</strong></li></ol><p>‍</p><p>The processing of personal data is limited to data that is required to operate a functional website and for the provision of content, products, and services. The processing of personal data of our users is based on the purposes agreed or on a legal basis. We only collect personal data that is necessary to implement and process our tasks and services or if you provide data voluntarily. Depending on the reason and purpose of the processing, we process different data about you:</p><p>‍</p><ol role=\"list\"><li>Technical Data&nbsp;&nbsp;</li></ol><p>When you use our website or other online offerings, we collect the IP address of your terminal device and other technical data to ensure the functionality and security of these offerings. This data includes logs with records of the use of our systems. We generally keep technical data for a maximum of 6 months. To ensure the functionality of these offerings, we may also assign an individual code to you or your device (for example, as a cookie, see Section 15). Technical data as such does not permit drawing conclusions about your identity. However, technical data may be linked with other categories of data (and potentially with your person) in relation with user accounts, registrations, access controls, or the performance of a contract.</p><p>‍</p><ol start=\"2\" role=\"list\"><li>User Account and Registration Data&nbsp;&nbsp;</li></ol><p>Some of our services may only be used with a user account or a registration (e.g., competitions, newsletters, etc.). Such data will be kept for 12 months from the date the use of the services ceases or the user account is closed.</p><p>‍</p><ol start=\"3\" role=\"list\"><li>Communication Data&nbsp;&nbsp;</li></ol><p>When you get in contact with us via contact form, e-mail, telephone, chat, or by letter or other means of communication, we collect the data exchanged between you and us, including your contact details and the metadata of the communication. If we record telephone conversations, we will tell you specifically. If we have to confirm your identity, for example, in relation to a request for information, a request for press access, etc., we collect data to identify you (for example, a copy of an ID document). We generally keep this data for 12 months from the last exchange between us. This period may be longer where required for evidentiary purposes, to comply with legal or contractual requirements, or for technical reasons. E-mails in personal mailboxes and written correspondence are generally kept for at least 10 years. Chats are generally stored for 2 years.</p><p>‍</p><ol start=\"4\" role=\"list\"><li>Master Data&nbsp;&nbsp;</li></ol><p>Master data is the basic data that we need, in addition to contract data (see below), for the performance of our contractual and other business relationships or for marketing and promotional purposes, such as name and contact details, and information about, for example, your role and function, your bank details, your domicile, your date of birth, customer history, powers of attorney, signature authorizations and declarations of consent, as well as Know Your Customer (KYC) data, Know Your Business (KYB) data and further data relating to fraud prevention and the combating of money laundering and terrorist financing, export restrictions, sanctions, and embargoes. We process your master data if you are a customer or other business contact or work for one (for example as a contact person of the business partner), or because we wish to address you for our own purposes or for the purposes of a contractual partner (for example as part of marketing and advertising, as part of our grants and bounty programs, for invitations to events, for vouchers, newsletters, etc.). We receive master data from you (for example when you make use of our services provided), from parties you work for, or from third parties such as contractual partners, associations and address brokers, and from public sources such as public registers or the internet (websites, social media, etc.) or from activity that is publicly visible and/or accessible on blockchains (e.g., Blockchain address, information regarding purchases, sales, or transfer of NFTs, which may then be associated with other data you have provided to us). We generally keep master data for 10 years from the last exchange between us but at least from the end of the contract. This period may be longer if required for evidentiary purposes, to comply with legal or contractual requirements, or for technical reasons. For contacts used only for marketing and advertising, the period is usually much shorter, usually no more than 2 years from the last contact.</p><p>‍</p><ol start=\"5\" role=\"list\"><li>Contract Data&nbsp;&nbsp;</li></ol><p>We collect contract data in relation to the conclusion or performance of a contract, e.g., information about the products and services provided or to be provided, as well as data from the period leading up to the conclusion of a contract, information required or used for performing a contract, and information about feedback (e.g., complaints, feedback about satisfaction, etc.). We generally collect this data from you, from contractual partners and from third parties involved in the performance of the contract, but also from third-party sources (for example credit information providers) and from public sources. We generally keep this data for 10 years from the last contract activity but at least from the end of the contract. This period may be longer where necessary for evidentiary purposes, to comply with legal or contractual requirements, or for technical reasons.</p><p>‍</p><ol start=\"6\" role=\"list\"><li>Behavioral and Preference Data&nbsp;&nbsp;</li></ol><p>Depending on our relationship with you, we try to get to know you better and to tailor our products, services, and offers to you. For this purpose, we collect and process data about your behavior and preferences. We do so by evaluating information about your behavior. Based on this data, we can, for example, determine the likelihood that you will use certain services or behave in a certain way. The data processed for this purpose is already known to us (for example where and when you use our services), or we collect it by recording your behavior (for example, how you navigate our website). We anonymize or delete this data when it is no longer relevant for the purposes pursued, which may be - depending on the nature of the data - between 2-3 weeks and 24 months (for product and service preferences). This period may be longer for evidentiary purposes, to comply with legal or contractual requirements, or for technical reasons.&nbsp;</p><p>‍</p><ol start=\"7\" role=\"list\"><li>Other Data&nbsp;&nbsp;</li></ol><p>We also collect data from you in other situations. For example, data that may relate to you (such as files, evidence, etc.) is processed in relation to administrative or judicial proceedings. We may also collect data for health protection (for example as part of health protection concepts). We may obtain or create photos, videos, and sound recordings in which you may be identifiable (for example at events, with security cameras, etc.). We may also collect data about who enters certain buildings, and when or who has access rights (including in relation to access controls, based on registration data or lists of visitors, etc.), who participates in events or campaigns, e.g., competitions, and who uses our infrastructure and systems and when. The retention period for this data depends on the processing purpose and is limited to what is necessary. This ranges from one or two days for many of the security cameras, to usually a few weeks in case of data for contact tracing and visitor data that is usually kept for 3 months, to several years or longer for reports about events with images.</p><p>‍</p><p>Much of the data set out in this Section is provided to us by you, e.g., through forms, in relation to communication with us, in relation to contracts, when you use the website, etc. You are not obliged or required to disclose data to us except in individual cases, for example within the framework of binding health protection concepts (legal obligations). If you wish to enter into contracts with us or use our services, you must also provide us with certain data, in particular master data,contract data, and registration data, as part of your contractual obligation under the relevant contract. When using our website, the processing of technical data cannot be avoided. If you wish to gain access to certain systems or buildings, you must also provide us with registration data. However, in the case of behavioural and preference data, you have the option of objecting or not giving consent.</p><p>‍</p><p>We provide certain services to you only if you provide us with registration data, because we or our contractual partners wish to know who uses our services or has accepted an invitation to an event, because it is a technical requirement, or because we wish to communicate with you. If you or the person you represent (for example your employer) wishes to enter into or perform a contract with us, we must collect master data, contract data, and communication data from you, and we process technical data if you wish to use our website or other electronic offerings for this purpose. If you do not provide us with the data necessary for the conclusion and performance of the contract, you should expect that we may refuse to conclude the contract, that you may commit a breach of contract or that we will not perform the contract. Similarly, we can only submit a response to a request from you if we process communication data and - if you communicate with us online - possibly also technical data. Also, the use of our website is not possible without us receiving technical data.</p><p>‍</p><p>As far as it is not unlawful, we also collect data from public sources (for example debt collection registers, land registers, commercial registers, the media, or the internet including social media) or receive data from other companies within our group, from public authorities, and from other third parties (such as credit agencies, address brokers, associations, contractual partners, internet analytics services, etc.).</p><p>‍</p><p>The categories of personal data that we receive about you from third parties include, in particular, information from public registers, information that we receive in relation to administrative and legal proceedings, information in relation to your professional functions and activities (so that we can, for example, conclude and process transactions with your employer with your assistance), information about you in correspondence and meetings with third parties, credit information (where we conduct business with you in a personal capacity), information about you that persons related to you (family, advisors, legal representatives, etc.) share with us so that we can conclude or perform contracts with you or involving you (for example references, your delivery address, powers of attorney, information about compliance with legal requirements such as those relating to fraud prevention and the combating of money laundering and terrorist financing and Know Your Customer (KYC) data, Know Your Business (KYB) data, sanctions, export restrictions, information from banks, insurance companies, sales and other contractual partners of us about your use or provision of services (for example payments, purchases, etc.), information from the media and the internet about the use or provision of services by you (for example payments made, purchases made, etc.), information from the media and the internet about you (where appropriate in a specific case, e.g., in the context of an application, marketing/sales, press review, etc.), your address and potentially interests and other socio-demographic data (especially for marketing and research purposes) and data in relation with the use of third-party websites and online offerings where such use can be linked to you.</p><p>‍</p><ol start=\"4\" role=\"list\"><li>&nbsp;<strong>Purposes of the Processing of data</strong></li></ol><p>‍</p><p>We process your data for the purposes explained below. Further information is set out in Sections 15 et seq. for online services. These purposes and their objectives represent interests of us and potentially of third parties. You can find further information on the legal basis of our processing in Section 5.</p><p>‍</p><ol role=\"list\"><li>Communication&nbsp;&nbsp;</li></ol><p>We process your data for communication purposes, in order to communicate with you, in particular, when you contact us in order to respond to your queries or when you exercise your rights. For this purpose, we use in particular communication data, master data, and registration data to enable us to communicate with you and provide our services or respond to requests. We keep this data to document our communication with you, for training purposes and quality assurance.</p><p>‍</p><ol start=\"2\" role=\"list\"><li>Performance of a Contract&nbsp;&nbsp;</li></ol><p>We process your data for entering into a contract with you, perform, and administer it. In particular, we process communication data, master data, registration data, and contract data about you. This might include data about third parties, e.g., if you order products or services for the benefit of a third party. This also includes data about potential customers that we receive from communication with you, on a trade fair, or any other business event. As regards the conclusion of a contact, we use this data to assess your creditworthiness and to open up a business relationship with you. Administering and performing the contract with you might involve third parties, such as logistic companies, advertising service providers, banks, insurance companies, or credit information providers in order to provide our products and services to you.</p><p>‍</p><ol start=\"3\" role=\"list\"><li>Marketing and Relationship Management&nbsp;&nbsp;</li></ol><p>We process your data for marketing and relationship management purposes. For example, we send personalized newsletters for products and services from us and, if applicable from selected third parties (e.g., advertising partners). Marketing and relationship management might include contacting you via e-mail, telephone, or other channels for which we have contact information from you. We and, if applicable, selected third parties, only display personalized content or advertising based on your usage behaviour or send e-mails for marketing purposes (e.g., newsletters) if and to the extent you give your consent to us if required under applicable law. You can object to such marketing activities or withdraw your consent at any time (please see Sections 13 and 14).</p><p>‍</p><ol start=\"4\" role=\"list\"><li>Product/Service Improvement and Innovation&nbsp;&nbsp;</li></ol><p>We process your data for market research and to improve our products and services (including our website).</p><p>‍</p><ol start=\"5\" role=\"list\"><li>Safety or Security Reasons&nbsp;&nbsp;</li></ol><p>We process your data to protect our IT and other infrastructure (e.g., buildings). For example, we process data for monitoring, analysis, and testing of our networks and IT infrastructures including access controls. We might also use surveillance systems, e.g., cameras for security purposes. In such a case, we will inform you at the relevant locations separately.</p><p>‍</p><ol start=\"6\" role=\"list\"><li>Compliance with Law&nbsp;&nbsp;</li></ol><p>We process your data to comply with legal requirements, e.g., health security concepts, money laundering and terrorist financing, tax obligations etc. and we might have to request further information from you to comply with such requirements (“Know Your Customer”, “KYC”; “Know Your Business”, “KYB”) or as otherwise required by law and legal authorities.</p><p>‍</p><ol start=\"7\" role=\"list\"><li>Risk Management, Corporate Governance, and Business Development&nbsp;&nbsp;</li></ol><p>We process your data as part of our risk management and corporate governance in order to protect us from criminal or abusive activity. As part of our business development, we might sell businesses, parts of businesses, or companies to others or acquire them from others or enter into partnerships and this might result in the exchange and processing of data based on your consent, if necessary.</p><p>‍</p><ol start=\"5\" role=\"list\"><li><strong>&nbsp;Legal Ground for Processing Your Data</strong></li></ol><p>‍</p><ol role=\"list\"><li>Your Consent&nbsp;&nbsp;</li></ol><p>Where we asked for your consent (e.g., for receiving newsletters and for personalized content or advertising based on your usage behavior or for processing sensitive data), we process your data based on such consent. You may withdraw your consent at any time with effect for the future by providing us written notice (e-mail sufficient), see our contact details in Section 2. If you like to withdraw your consent for online tracking, please see Sections 15 et seq. Withdrawal of your consent does not affect the lawfulness of the processing that we have carried out prior to your withdrawal, nor does it affect the processing of your data-based on other processing grounds.</p><p>‍</p><ol start=\"2\" role=\"list\"><li>Where we did not ask for your consent, we process your data on other legal grounds, such as:</li></ol><p>‍</p><p>- A contractual obligation</p><p>- A legal obligation</p><p>- A vital interest of the data subject or of another natural person</p><p>- A legitimate interest, which includes compliance with applicable law and the marketing of our products and services, the interest in better understanding our markets and in managing and further developing our company, including its operations, safely and efficiently.</p><p>‍</p><ol start=\"6\" role=\"list\"><li><strong>&nbsp;Profiling and Automated Decision Taking</strong></li></ol><p>‍</p><p>We might analyze aspects of your individual's personality, behavior, interests, and habits to make predictions or decisions about them for the purposes laid out in Section 4, e.g., to perform statistical analysis or to prevent misuse and security risks. This analysis identifies correlations between different behaviors and characteristics to create profiles for individuals. For example, we may use profiling to determine in which products or services you might be interested. We may also use profiling to assess your creditworthiness. We do not use profiling that can produce legal effects concerning you or similarly significantly affect you without human review.</p><p>‍</p><p>In certain circumstances, automated decision-taking might be necessary for reasons of efficiency and consistency. In such cases, we will inform you accordingly and take the measures required by applicable law.</p><p>‍</p><ol start=\"7\" role=\"list\"><li><strong>&nbsp;On-Chain Data (Blockchain)</strong></li></ol><p>‍</p><p>By using our blockchain-based services you acknowledge that your wallet address and related transactions, which are considered personal data if relating to an identified or identifiable natural person, are permanently and publicly stored on the blockchain, publicly available to anyone, and neither we, nor any third party, has any power to delete such data published by its users to the blockchain. If you want to ensure that your privacy rights are not affected in any way, you should not transact on blockchains as certain rights may not be fully available or exercisable by you or us due to the technological infrastructure of the blockchain.</p><p>‍</p><p>You hereby release and indemnify us of any data privacy liability associated with data that you published to the blockchain by using our services.</p><p>‍</p><ol start=\"8\" role=\"list\"><li><strong>Disclosure of Data to Third Parties and Social Plug-ins</strong></li></ol><p>‍</p><p>In order to perform our contracts, fulfill our legal obligations, protect our legitimate interest and the other purposes and legal grounds set out above, we may disclose your data to third parties, in particular to the following categories of recipients:</p><p>‍</p><p>- Group Companies</p><p>You hereby release and indemnify us of any data privacy liability associated with data that you published to the blockchain by using our services.</p><p>‍</p><p>- Offerings of Third Parties</p><p>Our Website may contain third-party offerings. If you click on such an offer, we will transfer data to the respective third party to the extent necessary (e.g., the information that you found this offer on our website or app and, if applicable, further information that you provided for this purpose on our website or app). We have no control over, do not review, and cannot be responsible for these third-party websites or their content. Please be aware that the terms of this Privacy Policy do not apply to these third-party websites or their content, or to any collection of your data after you click on links to such third-party websites. We encourage you to read the privacy policies of every website you visit. Any links to third-party websites or locations are for your convenience and do not signify our endorsement of such third parties or their products, content, or websites.</p><p>‍</p><p>- Third-Party Wallets</p><p>To use our services or interact with us, you may use a third-party wallet that allows you to engage in transactions on public blockchains. The applicable terms of service and privacy policy of that third party govern your interactions with any third-party wallet provider.</p><p>‍</p><p>- Service Providers</p><p>We may share your information with service providers and business partners around the world with whom we collaborate to fulfill the above purposes (e.g., IT providers, shipping companies, advertising service providers, security companies, banks, insurance companies, telecommunication companies, credit information agencies, address verification providers, lawyers) or who we engage to process personal data for any of the purposes listed above on our behalf and in accordance with our instructions only.</p><p>‍</p><p>- Contractual Partners Including Customers</p><p>If required under the respective contract we share your data with other contractual partners. If we sell or buy any business or assets, we may disclose your data to the prospective seller or buyer of such business or assets to whom we assign or novate any of our rights and obligations.</p><p>‍</p><p>- Legal Authorities</p><p>If legally obliged or entitled to make disclosures or if it appears necessary to protect our interests, we may disclose your data to courts, law enforcement authorities, regulators, government officials, or other legal authorities in Switzerland or abroad, e.g., in criminal investigations and legal proceedings including alternative dispute resolution as well as to prevent and combat money laundering and terrorist financing (e.g., duties in the event of a suspicion of money laundering, duty to report to Money Laundering Reporting Offices Switzerland or abroad) or due to further reporting duties.</p><p>‍</p><p>- Social Plug-ins</p><p>We do not use social media plug-ins on our website. If our website contains icons of social media providers (e.g., X, Mirror, etc.), we use these only as passive links to the websites of the respective social media platforms.</p><p>‍</p><p>- Our Appearance on Social Networks</p><p>We are present on the following social media platforms: [e.g., X, LinkedIn, Instagram, YouTube, TikTok, Mirror, Farcaster, Lens] and collect data about you as described in Section 3 and below. We receive this data from you and the platforms when you enter into contact with us via our online presence (e.g., when you communicate with us, comment on our content, or visit our presence).</p><p>‍</p><p>At the same time, the platforms evaluate your use of our online presence and link this data with other data about you known to the platforms (e.g., about your behavior and preferences). They also process this data for their own purposes under their own responsibility, in particular for marketing and market research purposes (e.g., to personalize advertising) and to control their platform (e.g., which content they show to you). This also happens if you do not have a profile on the social media platform.</p><p>‍</p><p>We process this data for the purposes described in Section 4, in particular for communication, marketing purposes, and market research. You will find information on the legal basis in Section 5.</p><p>‍</p><p>We would like to point out that you use our presence on social media platforms and their functions on your own responsibility. This applies, in particular, to the use of interactive functions (e.g., commenting, sharing, rating).</p><p>‍</p><p>The individual data processing activities and their scope differ depending on the social media provider. For details about the collection and storage of your personal data and about the type, scope, and purpose of its use by the social media provider, please refer to the privacy policy of the respective social media provider.</p><p>‍</p><p>The data collected about you in this context is processed by the platforms and may be transferred to countries outside the European Union, in particular the USA, which is considered not to provide adequate data protection from a Swiss/EU perspective. Therefore, we have agreed to so-called standard data protection clauses (SCCs) with the social media providers in order to ensure compliance with an appropriate level of data protection in third countries.</p><p>‍</p><p>We do not know how the social media platforms use the data from your visit to our account and interaction with our posts for their own purposes, how long this data is stored, and whether data is passed on to third parties. The data processing may differ depending on whether you are registered and logged in to the social network or visit the site as a non-registered and/or non-logged-in user. When you access a post or the account, the IP address assigned to your terminal device is transmitted to the provider of the social media platform. If you are currently logged in as a user, a cookie on your end device can be used to track how you have moved around the network. Buttons embedded in websites enable the platforms to record your visits to these website pages and assign them to your respective profile. Based on this data, content or advertising can be offered tailored to you. If you wish to avoid this, you should log out or deactivate the \"stay logged in\" function, delete the cookies on your device, and restart your browser.</p><p>‍</p><p>To exercise your data subject rights, you can contact both us and the provider of the social media platform. To the extent that one party is not responsible for responding or must obtain the information from the other party, we or the provider will then forward your request to the respective partner. Please contact the provider of the social media platform directly for questions about profiling, and processing of your data when using the website. For questions about the processing of your interaction with us on our site, write to the contact details provided by us above.</p><p>‍</p><p>For further information on the purpose and scope of data collection and processing by the social media platform, please review the Privacy Policys of these social media platforms, where you will also receive further information about your rights and about setting options for protecting your privacy.</p><p>‍</p><ol start=\"9\" role=\"list\"><li><strong>&nbsp;Transfer of Data Abroad</strong></li></ol><p>‍</p><p>As we have explained in Section 7, we disclose data to other parties, not all of them located in Switzerland. Your data may be processed in the European Economic Area (EEA) and in exceptional circumstances also in countries outside the EEA and around the world, which includes countries that do not provide the same level of data protection as Switzerland or the EEA and are not recognized as providing an adequate level of data protection. We only transfer data to these countries when it is necessary for the performance of a contract or for the exercise or defence of legal claims, or if such transfer is based on your explicit consent or subject to safeguards that assure the protection of your data, such as the European Commission approved standard contractual clauses.</p><p>‍</p><ol start=\"10\" role=\"list\"><li><strong>&nbsp;Storage of Your Personal Data</strong></li></ol><p>‍</p><p>We only process your data for as long as necessary to fulfill the purposes we collected it for, including for the purposes of complying with legal retention requirements and where required to assert or defend against legal claims, until the end of the relevant retention period or until the claims in question have been settled. Upon the expiry of the applicable retention period, we will securely destroy your data in accordance with applicable laws and regulations.</p><p>‍</p><ol start=\"11\" role=\"list\"><li><strong>&nbsp;Security of Your Personal Data</strong></li></ol><p>‍</p><p>We take appropriate organizational and technical security measures to prevent your personal data from being accidentally lost, used, or accessed in an unauthorized way, altered, or disclosed.</p><p>‍</p><p>However, we and your personal data can still become victims of cyber-attacks, cybercrime, brute force, hacker attacks, and further fraudulent and malicious activity including but not limited to viruses, forgeries, malfunctions, and interruptions which are out of our control and responsibility.</p><p>‍</p><p>We have also implemented procedures to deal with any suspected personal data breach and will notify you and any applicable regulator of a breach where we are legally required to do so.</p><p>‍</p><ol start=\"12\" role=\"list\"><li><strong>&nbsp;Your Rights</strong></li></ol><p>‍</p><p>You have various rights in relation with our processing of your personal data, depending on the applicable data protection law:</p><p>‍</p><p>- Right of Access</p><p>You have the right to request a copy of the personal data that we hold about you. However, there are exceptions to this right, so access may be denied if, for example, making the information available to you would reveal personal data about another person or if we are legally prevented from disclosing such information.</p><p>‍</p><p>- Right to Rectification</p><p>We aim to keep your personal data accurate, current, and complete. We encourage you to contact us to let us know if any of your personal data is inaccurate or changes so that we can keep it up to date.</p><p>‍</p><p>- Right to Erasure</p><p>You have the right to require us to erase your personal data when the personal data is no longer necessary for the purposes for which it was collected, or when, among other things, your personal data has been unlawfully processed.</p><p>‍</p><p>- Right to Restriction</p><p>You have the right to ask us to restrict the processing of your personal information in certain circumstances.</p><p>‍</p><p>- Right to Data Portability</p><p>You have the right to ask that we transfer the personal information you gave us to another controller or to you, in certain circumstances.</p><p>‍</p><p>- Right to Withdraw Consent</p><p>Where we process data based on your consent, you have the right to withdraw your consent. Once we have received notification that you have withdrawn your consent, we will no longer process your information for the purpose(s) to which you originally consented unless there is another legal ground for the processing.</p><p>‍</p><p>- Complaints</p><p>If you believe that your data protection rights might have been breached, please</p><p>‍</p><p>&nbsp;let us know or contact the applicable supervisory authority. The Federal Data Protection and Information Commissioner is the competent data protection authority in Switzerland. The contact details are available here: www.edoeb.admin.ch.</p><p>‍</p><p>If you are residing in the European Union, you also have the right to complain to your local data protection supervisory authority. You can find some contact details of the respective authorities of the Member States of the European Union here: https://edpb.europa.eu/about-edpb/about-edpb/members_en.</p><p>‍</p><ol start=\"13\" role=\"list\"><li><strong>&nbsp;Right to Object</strong></li></ol><p>‍</p><p>Under applicable data protection law, you have the right to object at any time to the processing of personal data pertaining to you under certain circumstances, in particular where your data is processed in the public interest, on the basis of a balance of interests or for direct marketing purposes.</p><p>‍</p><p>If you would like to exercise the above-mentioned rights, please contact us at <a class=\"underline\" href=\"mailto:hello@universaleverything.io\">hello@universaleverything.io</a> or the contact details provided under Section 2 unless otherwise specified or agreed. Please note that we need to identify you to prevent misuse, e.g., by means of a copy of your ID card or passport, unless identification is possible otherwise.</p><p>‍</p><ol start=\"14\" role=\"list\"><li><strong>&nbsp;Newsletter</strong></li></ol><p>‍</p><p>If you subscribe to one of our newsletters, you may cancel the subscription at any time by using the option to unsubscribe contained in the newsletter.</p><p>‍</p><ol start=\"15\" role=\"list\"><li><strong>&nbsp;Cookies</strong></li></ol><p>‍</p><p>We use cookies on our website and may allow certain third parties to do so as well. Cookies are small files that your browser automatically creates and that are stored on your device (laptop, tablet, smartphone, etc.) when you visit our website. For further information, please see also our Cookie Policy.</p><p>‍</p><ol start=\"16\" role=\"list\"><li><strong>&nbsp;Monitoring Tools</strong></li></ol><p>‍</p><p>We use social media monitoring tools that help us to identify and monitor content on third-party websites, e.g., in posts, tweets, blogs, news, forum posts, and social media platforms. This gives us a detailed insight into customer opinions and any topics on the internet that mention our company name(s) or talk about our brand(s). In doing so, so-called \"crawlers\" search available online sources to seek out the relevant hits. Some monitoring tools search both publicly available data on the internet and closed-loop third-party networks with which they have directly concluded contracts in order to access their data.</p><p>‍</p><p>Our use of monitoring tools is based on our legitimate interests of market and opinion research for marketing and PR purposes. Data processing by such monitoring tools is external and separate from our web and social media sites and we are not responsible for any data processing by such monitoring tools.</p><p>‍</p><p>If you would like to object to the use of your information by such monitoring tools, or require information about the data stored by them, or if you wish to exercise any other right that you are entitled to, please contact the respective monitoring tool.</p><p>‍</p><ol start=\"17\" role=\"list\"><li><strong>&nbsp;Tracking Tools</strong></li></ol><p>‍</p><p>Based on your consent, we use tracking tools to ensure a tailored design and the continuous optimization of our website. We also use the following tracking tools to statistically record the use of our website and evaluate it for the purpose of optimizing the content we show you:</p><p>‍</p><p>- Google Analytics:&nbsp;&nbsp;</p><p>Google Ireland (based in Ireland) is our provider of “Google Analytics” and acts as our processor. Google Ireland relies on Google LLC (based in the USA) as a processor for its services (both “Google”). Google uses performance cookies (see above) to track the behavior of visitors to our website (duration, frequency of pages viewed, geographic origin of access, etc.) and compiles reports for us on the use of our website on this basis. We have configured the service so that the IP addresses of visitors are shortened by Google in Europe before being forwarded to the US and thus cannot be traced. We have turned off the \"Data Forwarding\" and \"Signals\" settings. Although we can assume that the information we share with Google is not personal data for Google, it is possible that Google can draw conclusions about the identity of visitors from this data for its own purposes, create personal profiles, and link this data to the Google accounts of these persons. If you consent to the use of Google Analytics, you explicitly agree to such processing, which also includes the transfer of personal data (in particular usage data for the website and app, device information, and individual IDs) to the US and other countries not offering adequate data protection from a Swiss/EU perspective. Information on the data protection of Google Analytics can be found here: (https://support.google.com/analytics/answer/6004245) and if you have a Google account, you can find further details on processing by Google: here (https://policies.google.com/technologies/partner-sites?hl=de).</p><p>‍</p><ol start=\"18\" role=\"list\"><li><strong>&nbsp;Updating and Changing this Privacy Policy</strong></li></ol><p>‍</p><p>Due to the continuous development of our website and its contents, changes in law or regulatory requirements, we might need to change this Privacy Policy from time to time. Our current Privacy Policy can be found at our website.</p><p>‍</p>",
   "profile_card_following": "Following",
   "image_error_invalid_message": "unverifiable image link",
+  "add_widget_warpcast_title": "Add Warpcast content",
   "error_eoa": "Please use Universal Profile Extension. ",
+  "widget_type_warpcast": "Warpcast",
   "token_asset_type_music": "MUSIC",
   "token_asset_type_contract": "SC",
+  "edit_widget_youtube_title": "Edit YouTube video",
   "settings_add_missing_assets_title": "Add missing assets",
+  "errors_invalid_url": "This is an invalid URL",
   "errors_already_owned": "You already own this token.",
   "modal_default_title": "Something went wrong...",
   "dapp_showcase_05_title": "de-folio.com",
+  "edit_grid_description": "You can rename or edit the number of column of this grid.",
+  "widget_type_soundcloud": "SoundCloud",
   "modal_select_assets_title": "Select an asset to send",
   "button_l14_profiles": "L14 PROFILES",
+  "add_widget_soundcloud_title": "Add SoundCloud music",
   "asset_creators_unverified": "Un-verified creator",
   "transak_success_button": "Got it!",
+  "modal_clone_widget_confirm": "Go to profile",
+  "widget_type_x": "X (Twitter)",
+  "add_widget_cancel": "Cancel",
+  "add_widget_x_title": "Add X (Twitter) content",
   "dapp_showcase_04_title": "upturn.live",
+  "add_grid_description": "Create a new grid and organize the content as you like.",
   "footer_need_help_text": "SUPPORT",
   "token_asset_type_image": "IMAGE",
+  "modal_external_add_grid_widget_description": "Do you want to add widget from external source?",
   "profile_tab_collectibles": "Collectibles",
   "dapp_showcase_04_image": "/images/upturn-dapp.jpg",
   "token_details_assets": "Token assets",
+  "modal_delete_grid_content": "Are you sure you want to delete {title} grid?",
   "landing_hero_description_not_connected": "Connect to <span class=\"paragraph-inter-16-semi-bold\">view</span> and send assets from your <span class=\"paragraph-inter-16-semi-bold\">Universal Profile</span>.",
+  "add_widget_soundcloud_description": "Use this widget to display any SoundCloud playlist, track, or artist on your grid.",
   "dapp_showcase_07_url": "https://stakingverse.io/",
   "missing_assets_page_title": "Add missing assets",
   "lyx_details_title": "LUKSO",
   "not_found_homepage": "Visit homepage",
   "lyx_details_description": "This is the native token of the LUKSO blockchain.",
   "asset_filter_created_assets": "Created assets",
+  "add_widget_youtube_input_placeholder": "Add any YouTube embed link",
   "button_buy_sell": "Buy / Sell",
   "token_owned": "Owns",
   "dapp_showcase_title": "Featured dApps",
   "landing_hero_title": "Universal Profile Wallet",
   "header_send": "Send",
   "modal_mobile_filter_confirm": "Filter",
+  "edit_widget_instagram_description": "Edit this widget to display any Instagram post on your grid.",
   "token_details_show_collection": "View collection",
   "send_card_return_to_profile": "Return to profile",
+  "modal_external_add_grid_widget_confirm": "Add",
   "filters_order_by_lastly_added": "Lastly added",
+  "grid_tabs_menu_edit": "Edit",
+  "widget_type_youtube": "YouTube",
+  "edit_widget_iframe_title": "Edit Website",
   "filters_order_by_name_asc": "Title A-Z",
   "dapp_showcase_04_url": "https://upturn.live/",
   "connect_or_install_button_install": "Install browser extension",
   "token_details_description": "Token Description",
   "dapp_showcase_08_image": "/images/lsp8-tracker-dapp.jpg",
   "token_asset_type_3d": "3D",
+  "add_widget_warpcast_instructions": "1. Find your favorite cast or profile on Warpcast\n2. Copy the link from the address bar at the top of your browser\n3. Paste it here",
   "data_provider_graph_title": "Read from indexing service",
   "header_my_profile": "My profile",
   "missing_assets_token_address": "Token contract address",
   "dapp_showcase_06_url": "https://universalgrave.com/",
-  "modal_connect_wallet_select_provider_connect_extension_button": "Universal Profile browser extension",
+  "modal_connect_wallet_select_provider_connect_extension_button": "Browser extension",
+  "grid_widget_add_widget_text": "Add content",
+  "grid_add_grid": "Add new grid",
   "missing_assets_description": "Find the token contract address of the asset you want to add and enter it below.",
   "dapp_showcase_02_url": "https://universalswaps.io/",
   "token_collection_of": "Owns {count}",
+  "add_widget_images_description": "Use this widget to display images from the web directly on your grid. Please note that uploading an image from your device is not available.",
+  "grid_mobile_limitations_message": "some editing features are not available on mobile right now",
+  "add_widget_elfsight_instructions": "-",
+  "add_widget_text_title_placeholder": "Please add a title",
   "data_provider_rpc_description": "Loads data directly from the blockchain using an RPC provider. If a custom RPC provider (This feature will be added later) is used the read data can not be manipulated by us. \n\nWill result in slower loading times during the loading of assets and some app features might be limited.",
+  "move_widget_description": "Please select to which Grid you want to move this widget.",
   "button_create_profile": "CREATE A PROFILE",
   "buy_lyx_card_ramp_description": "Ramp is a global financial technology company building solutions that connect the crypto economy with today’s financial infrastructure.",
   "send_success_button": "Send another token",
+  "widget_type_text": "Text",
+  "add_widget_instagram_input_placeholder": "Add any Instagram post",
+  "add_widget_instagram_instructions": "1. Find your favorite Instagram post\n2. Click the \"Options\" button (three dots ...)\n3. Select \"Embed\"\n4. Copy the entire code and paste it here",
   "data_provider_page_title": "Data loading mode",
   "pages_terms_title": "Terms of Service",
   "modal_switch_network_description": "To continue using this application you will need to change the browser extension network to {name}.",
@@ -195,46 +298,75 @@
   "token_details_buy_lyx": "Buy LYX",
   "footer_terms_text": "Terms & Conditions",
   "followed_by_text": "Followed by {names} {othersCount, plural,\n      =0 {you follow}\n      =1 {and 1 other you follow}\n      other {and # others you follow}\n    }",
+  "add_widget_elfsight_description": "Use this widget to display Elfsight on your grid.",
   "assets_empty_state_description": "To find out how to create your own assets such as Tokens and NFT’s on <strong>LUKSO</strong> 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\"><strong>documentation</strong></a>. ",
   "connect_or_install_button_coming_soon": "Coming soon...",
+  "modal_delete_widget_confirm": "Delete",
   "asset_creators_title": "Creators",
   "profile_balance_of": "of {balance} {symbol}",
+  "add_widget_x_instructions": "To add a X post\n1. Find your favorite post on X\n2. Copy the link from the address bar at the top of your browser or from the \"Share\" button\n3. Paste it here\n\nTo add a X profile\n1. Find your favorite profile on X\n2. Simply add his username here\n3. Alternatively, you can copy and paste the link from the address bar or from the \"Share\" button",
+  "widget_type_image": "Image",
   "erc725account_info_part1": "Search {numberOfProfiles} platform independent blockchain accounts {luksoWebsiteLink}",
   "collection_connected_own_info": "You own the following items from this collection",
+  "modal_delete_grid_confirm": "Delete",
+  "modal_delete_grid_cancel": "Cancel",
+  "edit_widget_warpcast_description": "Edit this widget to display any Warpcast feed or post.",
+  "add_widget_x_description": "Use this widget to display any X timeline or post on your grid.",
+  "add_widget_images_instructions": "-",
   "modal_connect_wallet_mobile_scan_title": "Scan to log in",
   "collection_not_avail_front": "Collection view is not available when loading data using the decentralised data loading mode. Please switch the data loading mode to centralised",
   "asset_filter_search_placeholder": "Search by title",
+  "move_widget_title": "Move widget",
+  "add_widget_spotify_instructions": "1. Find your favorite playlist, album, song, or artist on Spotify\n2. Click the \"More options\" button (three dots ...)\n3. Select \"Embed\" from the sharing options\n4. Copy the code and paste it here",
   "modal_switch_network_cancel": "Cancel",
   "network_activity_title": "Network activity",
   "dapp_showcase_07_image": "/images/stakingverse-dapp.jpg",
+  "edit_widget_soundcloud_description": "Edit this widget to display any SoundCloud playlist, track, or artist on your grid.",
+  "edit_widget_soundcloud_title": "Edit SoundCloud widget",
+  "grid_tabs_add_widget": "Add new",
   "buy_lyx_card_transak_description": "Transak provides leading Web3 on-ramp services, enabling users from over 180 countries to access LYX through various fiat payment methods.",
   "footer_docs_text": "DOCS",
   "errors_not_owner": "You do not own this token. Try a different token contract address",
   "missing_asset_label_missing": "Missing",
+  "add_widget_images_placeholder": "URL of the image",
   "buy_lyx_card_buy_button": "Buy LYX",
+  "add_widget_elfsight_title": "Add Elfsight widget",
+  "edit_widget_text_description": "Edit this widget to display and customize any text on your grid.",
   "error_unknown_standard": "Couldn't detect standard for this asset.",
   "settings_data_provider_title": "Data loading mode",
+  "modal_delete_grid_title": "Delete grid",
   "not_found_get_help": "Get some help",
-  "header_disconnect": "Disconnect",
+  "header_disconnect": "Log out",
   "tokens_title": "Tokens",
   "footer_faq_text": "FAQs",
+  "modal_external_add_grid_widget_title": "Add widget",
+  "grid_unsaved_changes_save": "Save changes",
   "send_card_view_in_explorer": "View transaction on block explorer",
   "asset_created_by": "Created by",
   "collectibles_title": "Collectibles",
   "modal_default_confirm": "Ok",
   "token_details_own": "You own this token",
+  "modal_delete_widget_content": "Are you sure you want to delete this content from your grid?",
+  "errors_invalid_input": "This is invalid input for {name}",
   "collection_not_connected_own_info": "owns the following items from this collection",
   "token_details_total_supply_of": "Total supply of {count}",
+  "modal_clone_widget_content": "Do you want to go to your profile?",
   "modal_mobile_filter_cancel": "Cancel",
+  "modal_external_add_grid_widget_cancel": "Cancel",
+  "add_grid_title_placeholder": "Enter a grid name",
   "data_provider_rpc_title": "Read from smart contracts",
+  "move_grid_widget_placeholder": "Select grid...",
   "dapp_showcase_08_title": "lsp8.app",
   "transak_success_title": "You bought some LYX!",
   "footer_need_help_url": "mailto:support@lukso.network",
   "create_profile_box_text": "Create your <strong>Universal Profile</strong> and get ready for a new kind of <strong>DApp</strong> experience! ",
+  "edit_widget_youtube_description": "Edit this widget to display any YouTube video on your grid.",
+  "modal_clone_widget_cancel": "No",
   "web3_interface_error_message": "You tried to connect with a legacy profile that is no longer supported.",
   "errors_invalid_address": "This is an invalid address",
-  "header_connect": "Login",
+  "header_connect": "Log in",
   "dapp_showcase_06_title": "universalgrave.com",
+  "grid_unsaved_changes_reset": "Reset",
   "collection_filter_search_placeholder": "Search by token ID",
   "nft_details_own": "You own this collectible",
   "error_wrong_network": "Your browser extension is using different network. In order to continue please switch to {name}.",
@@ -243,15 +375,24 @@
   "modal_switch_application_network_cancel": "Cancel",
   "web3_connect_error": "There was an error while connecting to the browser extension.",
   "not_up_button": "View on block explorer",
+  "add_widget_spotify_input_placeholder": "Add any Spotify playlist, album, song or artist",
   "modal_mobile_search_cancel": "Cancel",
+  "grid_widget_menu_delete": "Delete",
+  "widget_type_iframe": "iframe",
+  "add_widget_soundcloud_input_placeholder": "Add any Soundcloud playlist, album, track or artist",
+  "grid_exit_edit_mode": "Exit edit mode",
   "footer_privacy_policy_text": "Privacy Policy",
   "profile_card_unfollow_button": "Unfollow",
+  "grid_can_save": "Save changes",
+  "add_widget_iframe_description": "Use this widget to display a custom website directly on your grid, making it easy for visitors to view. Note that certain websites may have security settings that prevent embedding.",
   "token_details_get_lyx": "Get LYXt",
   "error_generic": "There was error while performing your request. Please try again later or contact the support.",
   "token_details_images": "Token Images",
   "profile_search_no_results": "No profile found",
-  "modal_connect_wallet_select_provider_install_info": "If you do not have the browser extension, clicking the above button will redirect you to install it",
+  "modal_connect_wallet_select_provider_install_info": "No Universal Profile yet? Install the mobile app or browser extension to create one!",
   "profile_card_copy_address": "UP address copied!",
   "success_missing_assets_description": "The below asset has been added to your profile.",
+  "modal_delete_widget_cancel": "Cancel",
+  "edit_widget_x_title": "Edit X (Twitter) widget",
   "asset_filter_collection_placeholder": "Collection"
 }
\ No newline at end of file
diff --git a/types/base.ts b/types/base.ts
new file mode 100644
index 00000000..0fdb0090
--- /dev/null
+++ b/types/base.ts
@@ -0,0 +1,2 @@
+export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
+export type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>
diff --git a/types/filters.ts b/types/filters.ts
index a2b8d082..74164f5e 100644
--- a/types/filters.ts
+++ b/types/filters.ts
@@ -1,6 +1,6 @@
 export type FiltersAssetType = 'owned' | 'created'
 
-export type FiltersAssetGroup = 'collectibles' | 'tokens'
+export type FiltersAssetGroup = 'collectibles' | 'tokens' | 'grid'
 
 export type FiltersAttribute = {
   group: string
diff --git a/types/global.d.ts b/types/global.d.ts
index e9eda61a..345f16d5 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -7,6 +7,7 @@ declare global {
     lukso: any
     ethereum: any
     web3: any
+    instgrm: any
   }
 
   // TODO remove when LSP package is released
diff --git a/types/grid.ts b/types/grid.ts
new file mode 100644
index 00000000..69e2ed7f
--- /dev/null
+++ b/types/grid.ts
@@ -0,0 +1,26 @@
+import type { ZodEffects, ZodObject, z } from 'zod'
+
+// TODO refactor parser into zod schema
+export type GridWidgetExtended = {
+  type: GridWidgetType
+  properties: Record<string, any>
+  originalWidth?: number
+}
+
+export type GridWidgetType = z.input<typeof GRID_WIDGET_TYPE>
+
+export type GridWidgetChange = {
+  oldWidget: GridWidget | null
+  newWidget: GridWidget | null
+}
+
+export type GridChange = {
+  oldGrid: Grid
+  newGrid: Grid
+}
+
+export type GridSchemaMap = {
+  input: ZodObject<any> | ZodEffects<ZodObject<any>>
+  output: ZodObject<any> | ZodEffects<ZodObject<any>>
+  build: ZodObject<any> | ZodEffects<ZodObject<any>>
+}
diff --git a/types/modal.ts b/types/modal.ts
index 99dbba4f..b7896abb 100644
--- a/types/modal.ts
+++ b/types/modal.ts
@@ -1,11 +1,10 @@
 import type { ModalSizes } from '@lukso/web-components'
 
-export type Modal = {
+export type Modal<T = ModalData> = {
   template?: string
-  data?: {
-    [key: string]: any
-  }
+  data?: T
   size?: ModalSizes
+  forceOpen?: boolean
 }
 
 export type ModalQueryParams = {
@@ -13,3 +12,14 @@ export type ModalQueryParams = {
   modalSize?: ModalSizes
   modalData?: any
 }
+
+export type ModalData = {
+  [key: string]: any
+}
+
+export type DefaultModalData = {
+  message: string
+  title?: string
+  confirmButtonText?: string
+  icon?: string
+}
diff --git a/types/profile.ts b/types/profile.ts
index 8572b40d..945cd7ac 100644
--- a/types/profile.ts
+++ b/types/profile.ts
@@ -55,5 +55,4 @@ export type IndexedProfile = {
   hasBackgroundImage?: boolean
 }
 
-export type ProfileViewTabName = 'collectibles' | 'tokens'
-export type ProfileViewTab = { id: ProfileViewTabName; count: number }
+export type ProfileViewTab = { id: FiltersAssetGroup; count?: number }
diff --git a/utils/__tests__/assetChecks.spec.ts b/utils/__tests__/assetChecks.spec.ts
index a5ef096b..76101170 100644
--- a/utils/__tests__/assetChecks.spec.ts
+++ b/utils/__tests__/assetChecks.spec.ts
@@ -1,10 +1,6 @@
+import { LSP4_TOKEN_TYPES } from '@lukso/lsp-smart-contracts'
 import { describe, expect, test } from 'vitest'
 
-import { LSP4_TOKEN_TYPES } from '@lukso/lsp-smart-contracts'
-import type {
-  SelectProfileOption,
-  SelectStringOption,
-} from '@lukso/web-components'
 import {
   getBalance,
   hasBalance,
diff --git a/utils/__tests__/assetTypes.spec.ts b/utils/__tests__/assetTypes.spec.ts
index 3671cdb8..5f1c090b 100644
--- a/utils/__tests__/assetTypes.spec.ts
+++ b/utils/__tests__/assetTypes.spec.ts
@@ -1,4 +1,5 @@
 import { expect, test } from 'vitest'
+
 import { getAssetType } from '../assetTypes'
 
 test('getAssetType', () => {
diff --git a/utils/__tests__/cloneObject.spec.ts b/utils/__tests__/cloneObject.spec.ts
new file mode 100644
index 00000000..482bbbd6
--- /dev/null
+++ b/utils/__tests__/cloneObject.spec.ts
@@ -0,0 +1,46 @@
+import { describe, expect, it } from 'vitest'
+
+import { cloneObject } from '../cloneObject'
+
+describe('cloneObject', () => {
+  it('should clone a simple object', () => {
+    const obj = { a: 1, b: 'test', c: true }
+    const clonedObj = cloneObject(obj)
+    expect(clonedObj).toEqual(obj)
+    expect(clonedObj).not.toBe(obj)
+  })
+
+  it('should clone a nested object', () => {
+    const obj = { a: 1, b: { c: 2, d: { e: 3 } } }
+    const clonedObj = cloneObject(obj)
+    expect(clonedObj).toEqual(obj)
+    expect(clonedObj.b).not.toBe(obj.b)
+    expect(clonedObj.b.d).not.toBe(obj.b.d)
+  })
+
+  it('should clone an array', () => {
+    const arr = [1, 2, 3, { a: 4 }]
+    const clonedArr = cloneObject(arr)
+    expect(clonedArr).toEqual(arr)
+    expect(clonedArr).not.toBe(arr)
+    expect(clonedArr[3]).not.toBe(arr[3])
+  })
+
+  it('should not handle special types like Date', () => {
+    const obj = { a: new Date() }
+    const clonedObj = cloneObject(obj)
+    expect(clonedObj.a).not.toBeInstanceOf(Date)
+  })
+
+  it('should not handle special types like Map', () => {
+    const obj = { a: new Map() }
+    const clonedObj = cloneObject(obj)
+    expect(clonedObj.a).not.toBeInstanceOf(Map)
+  })
+
+  it('should throw an error for circular references', () => {
+    const obj: any = { a: 1 }
+    obj.b = obj
+    expect(() => cloneObject(obj)).toThrow()
+  })
+})
diff --git a/utils/__tests__/decodeParameter.spec.ts b/utils/__tests__/decodeParameter.spec.ts
index b5468643..33b15c16 100644
--- a/utils/__tests__/decodeParameter.spec.ts
+++ b/utils/__tests__/decodeParameter.spec.ts
@@ -1,5 +1,6 @@
 import { describe, expect, test, vi } from 'vitest'
 import ABICoder from 'web3-eth-abi'
+
 import { decodeParameter } from '../decodeParameter'
 
 describe('decodeParameter function', () => {
diff --git a/utils/__tests__/deepEqual.spec.ts b/utils/__tests__/deepEqual.spec.ts
new file mode 100644
index 00000000..01cce619
--- /dev/null
+++ b/utils/__tests__/deepEqual.spec.ts
@@ -0,0 +1,65 @@
+import { describe, expect, it } from 'vitest'
+
+import { deepEqual } from '../deepEqual'
+
+describe('deepEqual', () => {
+  it('returns true for identical objects', () => {
+    const obj1 = { a: 1, b: 2 }
+    const obj2 = { a: 1, b: 2 }
+    expect(deepEqual(obj1, obj2)).toBe(true)
+  })
+
+  it('returns false for different objects', () => {
+    const obj1 = { a: 1, b: 2 }
+    const obj2 = { a: 1, b: 3 }
+    expect(deepEqual(obj1, obj2)).toBe(false)
+  })
+
+  it('returns false for objects with different keys', () => {
+    const obj1 = { a: 1, b: 2 }
+    const obj2 = { a: 1, c: 2 }
+    expect(deepEqual(obj1, obj2)).toBe(false)
+  })
+
+  it('returns true for nested identical objects', () => {
+    const obj1 = { a: { b: 2, c: 3 }, d: 4 }
+    const obj2 = { a: { b: 2, c: 3 }, d: 4 }
+    expect(deepEqual(obj1, obj2)).toBe(true)
+  })
+
+  it('returns false for nested different objects', () => {
+    const obj1 = { a: { b: 2, c: 3 }, d: 4 }
+    const obj2 = { a: { b: 2, c: 4 }, d: 4 }
+    expect(deepEqual(obj1, obj2)).toBe(false)
+  })
+
+  it('returns true for identical objects with arrays', () => {
+    const obj1 = { a: [1, 2, 3], b: 4 }
+    const obj2 = { a: [1, 2, 3], b: 4 }
+    expect(deepEqual(obj1, obj2)).toBe(true)
+  })
+
+  it('returns false for objects with different arrays', () => {
+    const obj1 = { a: [1, 2, 3], b: 4 }
+    const obj2 = { a: [1, 2, 4], b: 4 }
+    expect(deepEqual(obj1, obj2)).toBe(false)
+  })
+
+  it('returns false for objects of different types', () => {
+    const obj1 = { a: 1, b: 2 }
+    const obj2 = { a: 1, b: '2' }
+    expect(deepEqual(obj1, obj2)).toBe(false)
+  })
+
+  it('returns true for identical empty objects', () => {
+    const obj1 = {}
+    const obj2 = {}
+    expect(deepEqual(obj1, obj2)).toBe(true)
+  })
+
+  it('returns false for one empty and one non-empty object', () => {
+    const obj1 = {}
+    const obj2 = { a: 1 }
+    expect(deepEqual(obj1, obj2)).toBe(false)
+  })
+})
diff --git a/utils/__tests__/externalUrls.spec.ts b/utils/__tests__/externalUrls.spec.ts
index 34ecaae5..cb54efd1 100644
--- a/utils/__tests__/externalUrls.spec.ts
+++ b/utils/__tests__/externalUrls.spec.ts
@@ -1,7 +1,9 @@
 import { describe, expect, test } from 'vitest'
+
 import {
   universalPageProfileUrl,
   universalSwapsProfileUrl,
+  walletConnectDeepLinkUrl,
 } from '../externalUrls'
 
 describe('universalPageProfileUrl', () => {
@@ -147,3 +149,33 @@ describe('universalSwapsAssetUrl', () => {
     )
   })
 })
+
+describe('walletConnectDeepLinkUrl', () => {
+  test('should produce proper deep link without redirect URL', () => {
+    const input =
+      'wc:96c935c09bfae76a83d65747651a7e0c77592e3b7aeff8556bc91e9363a86689@2?expiryTimestamp=1728294685&relay-protocol=irn&symKey=8ba498cb98560cb940584b50450e77fe8699c29a5ecf28cbad7ee2f215685815'
+    const expectedOutput =
+      'io.universaleverything.universalprofiles://wallet-connect/96c935c09bfae76a83d65747651a7e0c77592e3b7aeff8556bc91e9363a86689@2?expiryTimestamp=1728294685&relay-protocol=irn&symKey=8ba498cb98560cb940584b50450e77fe8699c29a5ecf28cbad7ee2f215685815'
+    expect(walletConnectDeepLinkUrl(input)).toBe(expectedOutput)
+  })
+
+  test('should produce proper deep link with redirect URL', () => {
+    const input =
+      'wc:96c935c09bfae76a83d65747651a7e0c77592e3b7aeff8556bc91e9363a86689@2?expiryTimestamp=1728294685&relay-protocol=irn&symKey=8ba498cb98560cb940584b50450e77fe8699c29a5ecf28cbad7ee2f215685815'
+    const expectedOutput =
+      'io.universaleverything.universalprofiles://wallet-connect/96c935c09bfae76a83d65747651a7e0c77592e3b7aeff8556bc91e9363a86689@2?expiryTimestamp=1728294685&relay-protocol=irn&symKey=8ba498cb98560cb940584b50450e77fe8699c29a5ecf28cbad7ee2f215685815&redirectUrl=http%3A%2F%2Flocalhost%3A3000%2F'
+    expect(walletConnectDeepLinkUrl(input, { withRedirectUrl: true })).toBe(
+      expectedOutput
+    )
+  })
+
+  test('throws an error when data is invalid', () => {
+    // @ts-expect-error
+    expect(() => walletConnectDeepLinkUrl()).toThrow('Invalid URL')
+    expect(() => walletConnectDeepLinkUrl('123')).toThrow('Invalid URL')
+    // @ts-expect-error
+    expect(() => walletConnectDeepLinkUrl(null)).toThrow('Invalid URL')
+    // @ts-expect-error
+    expect(() => walletConnectDeepLinkUrl({})).toThrow('Invalid URL')
+  })
+})
diff --git a/utils/__tests__/groupAttributes.spec.ts b/utils/__tests__/groupAttributes.spec.ts
index 4c671e90..2f9bd8a6 100644
--- a/utils/__tests__/groupAttributes.spec.ts
+++ b/utils/__tests__/groupAttributes.spec.ts
@@ -1,4 +1,5 @@
 import { describe, expect, it } from 'vitest'
+
 import { groupAttributes } from '../groupAttributes'
 
 describe('groupAttributes', () => {
diff --git a/utils/__tests__/hexToNumber.spec.ts b/utils/__tests__/hexToNumber.spec.ts
index 54e7ed01..2a1c8d1d 100644
--- a/utils/__tests__/hexToNumber.spec.ts
+++ b/utils/__tests__/hexToNumber.spec.ts
@@ -1,4 +1,5 @@
 import { describe, expect, test, vi } from 'vitest'
+
 import { hexToNumber } from '../hexToNumber'
 
 describe('hexToNumber function', () => {
diff --git a/utils/__tests__/hexToUtf8.spec.ts b/utils/__tests__/hexToUtf8.spec.ts
index 5938ac4b..8448a766 100644
--- a/utils/__tests__/hexToUtf8.spec.ts
+++ b/utils/__tests__/hexToUtf8.spec.ts
@@ -1,4 +1,5 @@
 import { describe, expect, test, vi } from 'vitest'
+
 import { hexToUtf8 } from '../hexToUtf8'
 
 describe('hexToUtf8 function', () => {
diff --git a/utils/__tests__/isValidURL.spec.ts b/utils/__tests__/isValidURL.spec.ts
index 78990844..9e5b87f4 100644
--- a/utils/__tests__/isValidURL.spec.ts
+++ b/utils/__tests__/isValidURL.spec.ts
@@ -1,4 +1,5 @@
 import { describe, expect, it } from 'vitest'
+
 import { isValidURL } from '../isValidURL'
 
 describe('isValidURL', () => {
diff --git a/utils/__tests__/paddedToAddress.spec.ts b/utils/__tests__/paddedToAddress.spec.ts
index e311785f..bdc8bd1b 100644
--- a/utils/__tests__/paddedToAddress.spec.ts
+++ b/utils/__tests__/paddedToAddress.spec.ts
@@ -1,4 +1,5 @@
 import { expect, test } from 'vitest'
+
 import { paddedToAddress } from '../paddedToAddress'
 
 test('paddedToAddress should remove zero padding from an address', async () => {
diff --git a/utils/__tests__/queryParamsString.spec.ts b/utils/__tests__/queryParamsString.spec.ts
index 0b9c5950..8e66843c 100644
--- a/utils/__tests__/queryParamsString.spec.ts
+++ b/utils/__tests__/queryParamsString.spec.ts
@@ -1,4 +1,5 @@
 import { describe, expect, it } from 'vitest'
+
 import { queryParamsString } from '../queryParamsString'
 
 describe('queryParamsString', () => {
diff --git a/utils/__tests__/slug.spec.ts b/utils/__tests__/slug.spec.ts
index c5b8a754..4d2a9eea 100644
--- a/utils/__tests__/slug.spec.ts
+++ b/utils/__tests__/slug.spec.ts
@@ -1,4 +1,5 @@
 import { describe, expect, it } from 'vitest'
+
 import { slug } from '../slug'
 
 describe('slug', () => {
diff --git a/utils/__tests__/sort.spec.ts b/utils/__tests__/sort.spec.ts
index 68466424..b5ae0988 100644
--- a/utils/__tests__/sort.spec.ts
+++ b/utils/__tests__/sort.spec.ts
@@ -1,4 +1,5 @@
 import { describe, expect, it } from 'vitest'
+
 import { stringSort } from '../sort'
 
 describe('stringSort', () => {
diff --git a/utils/__tests__/tokenConversionWithDecimals.spec.ts b/utils/__tests__/tokenConversionWithDecimals.spec.ts
index 4fcbb4ab..3a20b1e1 100644
--- a/utils/__tests__/tokenConversionWithDecimals.spec.ts
+++ b/utils/__tests__/tokenConversionWithDecimals.spec.ts
@@ -1,4 +1,5 @@
 import { describe, expect, it } from 'vitest'
+
 import {
   fromTokenUnitWithDecimals,
   toTokenUnitWithDecimals,
diff --git a/utils/__tests__/truncate.spec.ts b/utils/__tests__/truncate.spec.ts
index 6b05e73e..86609132 100644
--- a/utils/__tests__/truncate.spec.ts
+++ b/utils/__tests__/truncate.spec.ts
@@ -1,4 +1,5 @@
 import { describe, expect, it } from 'vitest'
+
 import { truncate } from '../truncate'
 
 describe('truncate', () => {
diff --git a/utils/__tests__/unflatArray.spec.ts b/utils/__tests__/unflatArray.spec.ts
index 324f69b6..40a6666a 100644
--- a/utils/__tests__/unflatArray.spec.ts
+++ b/utils/__tests__/unflatArray.spec.ts
@@ -1,4 +1,5 @@
-import { describe, expect, test } from 'vitest'
+import { expect, test } from 'vitest'
+
 import { unflatArray } from '../unflatArray'
 
 test('handles consecutive indexes', () => {
diff --git a/utils/__tests__/validateLspMetadata.spec.ts b/utils/__tests__/validateLspMetadata.spec.ts
index 0d3e4392..8dae3455 100644
--- a/utils/__tests__/validateLspMetadata.spec.ts
+++ b/utils/__tests__/validateLspMetadata.spec.ts
@@ -1,9 +1,9 @@
 import { describe, expect, test } from 'vitest'
+
 import {
   validateAssets,
   validateAttributes,
   validateDescription,
-  validateImage,
   validateImages,
   validateLinks,
   validateName,
diff --git a/utils/__tests__/validators.spec.ts b/utils/__tests__/validators.spec.ts
index 55d3b8a0..40bbc45b 100644
--- a/utils/__tests__/validators.spec.ts
+++ b/utils/__tests__/validators.spec.ts
@@ -1,4 +1,5 @@
 import { describe, expect, test } from 'vitest'
+
 import {
   assertAddress,
   assertAddresses,
diff --git a/utils/capitalize.ts b/utils/capitalize.ts
new file mode 100644
index 00000000..9931175c
--- /dev/null
+++ b/utils/capitalize.ts
@@ -0,0 +1,9 @@
+export const capitalize = (_text?: string) => {
+  if (!_text || typeof _text !== 'string') {
+    return ''
+  }
+
+  const text = _text.trim().toLowerCase()
+
+  return text.charAt(0).toUpperCase() + text.slice(1)
+}
diff --git a/utils/checkNetwork.ts b/utils/checkNetwork.ts
index d4d2ee7b..72881255 100644
--- a/utils/checkNetwork.ts
+++ b/utils/checkNetwork.ts
@@ -15,7 +15,7 @@ export const checkNetwork = async (
   try {
     const chainId = (await currentProvider.value?.request({
       method: 'eth_chainId',
-    })) as string
+    })) as string | number
 
     // when we can't get network information from ext it's very likely it's not installed yet, then we just exit
     if (!chainId) {
@@ -23,7 +23,7 @@ export const checkNetwork = async (
     }
 
     // if network mismatch then show modal and break further execution by throwing an error
-    if (currentNetwork.chainId !== chainId) {
+    if (currentNetwork.chainId !== numberToHex(chainId)) {
       showModal({
         template: 'SwitchExtensionNetwork',
       })
diff --git a/utils/cloneObject.ts b/utils/cloneObject.ts
new file mode 100644
index 00000000..54d4cf05
--- /dev/null
+++ b/utils/cloneObject.ts
@@ -0,0 +1,14 @@
+/**
+ * Creates a deep clone of the provided object.
+ *
+ * This function serializes the object to a JSON string and then parses it back to a new object,
+ * effectively creating a deep copy. Note that this method may not handle all edge cases, such as
+ * objects with circular references, functions, or special object types like `Date` or `Map`.
+ *
+ * @typeParam T - The type of the object to be cloned.
+ * @param obj - The object to be cloned.
+ * @returns A deep clone of the provided object.
+ */
+export const cloneObject = <T>(obj: T): T => {
+  return JSON.parse(JSON.stringify(obj))
+}
diff --git a/utils/deepEqual.ts b/utils/deepEqual.ts
new file mode 100644
index 00000000..0b093c54
--- /dev/null
+++ b/utils/deepEqual.ts
@@ -0,0 +1,36 @@
+/**
+ * Deep comparison between two objects
+ *
+ * @param obj1
+ * @param obj2
+ * @returns boolean
+ */
+export const deepEqual = (obj1: any, obj2: any): boolean => {
+  if (obj1 === obj2) {
+    return true
+  }
+
+  if (
+    typeof obj1 !== 'object' ||
+    typeof obj2 !== 'object' ||
+    obj1 == null ||
+    obj2 == null
+  ) {
+    return false
+  }
+
+  const keys1 = Object.keys(obj1)
+  const keys2 = Object.keys(obj2)
+
+  if (keys1.length !== keys2.length) {
+    return false
+  }
+
+  for (const key of keys1) {
+    if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) {
+      return false
+    }
+  }
+
+  return true
+}
diff --git a/utils/externalUrls.ts b/utils/externalUrls.ts
index 7b011f57..c26f97ff 100644
--- a/utils/externalUrls.ts
+++ b/utils/externalUrls.ts
@@ -1,11 +1,12 @@
 import assert from 'assert'
 import { isAddress } from 'web3-utils'
 
+import { MOBILE_APP_DEEP_LINK_PREFIX } from '@/shared/config'
+
 /**
  * URL to transaction on blockchain explorer
  *
  * @param transactionHash
- * @returns
  */
 export const explorerTransactionUrl = (transactionHash: string) => {
   const { currentNetwork } = storeToRefs(useAppStore())
@@ -17,7 +18,6 @@ export const explorerTransactionUrl = (transactionHash: string) => {
  * URL to contract on blockchain explorer
  *
  * @param address
- * @returns
  */
 export const explorerContractUrl = (address?: string | Address) => {
   const { currentNetwork } = storeToRefs(useAppStore())
@@ -27,8 +27,6 @@ export const explorerContractUrl = (address?: string | Address) => {
 
 /**
  * URL to Transak to buy LYX
- *
- * @returns
  */
 export const transakBuyLyxUrl = () => {
   const connectedProfile = useProfile().connectedProfile()
@@ -53,6 +51,9 @@ export const transakBuyLyxUrl = () => {
   return `${TRANSAK_HOST}/?${queryParamsString(queryParams)}`
 }
 
+/**
+ * URL to Ramp to buy LYX
+ */
 export const rampBuyLyxUrl = () => {
   const connectedProfile = useProfile().connectedProfile()
   const { formatMessage } = useIntl()
@@ -75,8 +76,6 @@ export const rampBuyLyxUrl = () => {
 
 /**
  * URL to profile dashboard on my.universalprofile.cloud
- *
- * @returns
  */
 export const myUpDappDashboardUrl = () => {
   const { currentNetwork } = storeToRefs(useAppStore())
@@ -86,8 +85,6 @@ export const myUpDappDashboardUrl = () => {
 
 /**
  * URL to landing page on my.universalprofile.cloud
- *
- * @returns
  */
 export const myUpDappBaseUrl = () => {
   const { currentNetwork } = storeToRefs(useAppStore())
@@ -98,7 +95,7 @@ export const myUpDappBaseUrl = () => {
 /**
  * URL to profile page on universal.page
  *
- * @returns
+ * @param address
  */
 export const universalPageProfileUrl = (address?: Address) => {
   assert(address, 'Address is required')
@@ -111,7 +108,6 @@ export const universalPageProfileUrl = (address?: Address) => {
  *
  * @param address
  * @param tokenId
- * @returns
  */
 export const universalPageAssetUrl = (address?: Address, tokenId?: string) => {
   assert(address, 'Address is required')
@@ -127,7 +123,7 @@ export const universalPageAssetUrl = (address?: Address, tokenId?: string) => {
 /**
  * URL to profile page on universalswaps.io
  *
- * @returns
+ * @param address
  */
 export const universalSwapsProfileUrl = (address?: Address) => {
   assert(address, 'Address is required')
@@ -139,10 +135,50 @@ export const universalSwapsProfileUrl = (address?: Address) => {
  * URL to token page on universalswaps.io
  *
  * @param address
- * @returns
  */
 export const universalSwapsAssetUrl = (address?: Address) => {
   assert(address, 'Address is required')
   assert(isAddress(address), 'Address is not a valid address')
   return `https://universalswaps.io/tokens/lukso/${address.toLowerCase()}`
 }
+
+/**
+ * URL to Mobile App deep link used by Wallet Connect
+ *
+ * @param data
+ */
+export const walletConnectDeepLinkUrl = (
+  data: string,
+  options?: {
+    withRedirectUrl?: boolean
+  }
+) => {
+  if (genericLog.enabled) {
+    genericLog(`Wallet Connect link: ${data}`)
+  }
+
+  const dataUrl = new URL(data)
+
+  // add redirectUrl to deep link
+  if (options?.withRedirectUrl) {
+    const redirectUrl = new URL(location.href)
+
+    // remove modal query params so we don't re-open the modal
+    redirectUrl.searchParams.delete('modalTemplate')
+    redirectUrl.searchParams.delete('modalSize')
+
+    // add redirectUrl to dataUrl
+    dataUrl.searchParams.append(
+      'redirectUrl',
+      `${redirectUrl.origin}${redirectUrl.pathname}${redirectUrl.search}`
+    )
+  }
+
+  const deepLink = `${MOBILE_APP_DEEP_LINK_PREFIX}://wallet-connect/${dataUrl.pathname}${dataUrl.search}`
+
+  if (genericLog.enabled) {
+    genericLog(`Mobile App link: ${deepLink}`)
+  }
+
+  return deepLink
+}
diff --git a/utils/fetcher.ts b/utils/fetcher.ts
index a2f83c42..11bc26b2 100644
--- a/utils/fetcher.ts
+++ b/utils/fetcher.ts
@@ -2,7 +2,8 @@
  * Generic url fetcher.
  *
  * @param string url - an url to call
- * @param string address - a method used in the request, either 'GET' or 'POST'
+ * @param string method - a method used in the request, either 'GET' or 'POST'
+ * @param RequestMode mode - a mode of the request
  * @param Request data - a request data to be sent
  * @param Record headers - additional headers to be sent
  * @returns a result from calling the url
@@ -11,6 +12,7 @@
 export const fetcher = async <Response, Request>(config: {
   url: string
   method: 'GET' | 'POST'
+  mode?: RequestMode
   data?: Request
   headers?: Record<string, string>
 }): Promise<Response> => {
@@ -21,6 +23,7 @@ export const fetcher = async <Response, Request>(config: {
       ...(config.data ? { 'Content-Type': 'application/json' } : {}),
     },
     redirect: 'follow',
+    mode: config.mode || 'cors',
   }
   if (config.data) {
     fetchConfig.body = JSON.stringify(config.data)
diff --git a/utils/numberToHex.ts b/utils/numberToHex.ts
new file mode 100644
index 00000000..c0d305b2
--- /dev/null
+++ b/utils/numberToHex.ts
@@ -0,0 +1,15 @@
+import { numberToHex as web3numberToHex } from 'web3-utils'
+
+/**
+ * Wrap function into try catch block to not break app when it fails
+ *
+ * @param value
+ */
+export const numberToHex = (value: string | number) => {
+  try {
+    return web3numberToHex(value)
+  } catch (error) {
+    console.warn(`Couldn't convert number to hex with value ${value}`, error)
+    return ''
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 5e614787..0b37e47b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2582,18 +2582,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@biomejs/biome@npm:^1.7.0":
-  version: 1.7.0
-  resolution: "@biomejs/biome@npm:1.7.0"
-  dependencies:
-    "@biomejs/cli-darwin-arm64": "npm:1.7.0"
-    "@biomejs/cli-darwin-x64": "npm:1.7.0"
-    "@biomejs/cli-linux-arm64": "npm:1.7.0"
-    "@biomejs/cli-linux-arm64-musl": "npm:1.7.0"
-    "@biomejs/cli-linux-x64": "npm:1.7.0"
-    "@biomejs/cli-linux-x64-musl": "npm:1.7.0"
-    "@biomejs/cli-win32-arm64": "npm:1.7.0"
-    "@biomejs/cli-win32-x64": "npm:1.7.0"
+"@biomejs/biome@npm:^1.9.4":
+  version: 1.9.4
+  resolution: "@biomejs/biome@npm:1.9.4"
+  dependencies:
+    "@biomejs/cli-darwin-arm64": "npm:1.9.4"
+    "@biomejs/cli-darwin-x64": "npm:1.9.4"
+    "@biomejs/cli-linux-arm64": "npm:1.9.4"
+    "@biomejs/cli-linux-arm64-musl": "npm:1.9.4"
+    "@biomejs/cli-linux-x64": "npm:1.9.4"
+    "@biomejs/cli-linux-x64-musl": "npm:1.9.4"
+    "@biomejs/cli-win32-arm64": "npm:1.9.4"
+    "@biomejs/cli-win32-x64": "npm:1.9.4"
   dependenciesMeta:
     "@biomejs/cli-darwin-arm64":
       optional: true
@@ -2613,62 +2613,62 @@ __metadata:
       optional: true
   bin:
     biome: bin/biome
-  checksum: cf5b0bf2351686dce17ad07455a3b66af5371830e593968a58a89380f0893142a6337947239ee1b840babc753dc0542fa0a1685a5340a5512cc414f37a0e4a78
+  checksum: bd8ff8fb4dc0581bd60a9b9ac28d0cd03ba17c6a1de2ab6228b7fda582079594ceee774f47e41aac2fc6d35de1637def2e32ef2e58fa24e22d1b24ef9ee5cefa
   languageName: node
   linkType: hard
 
-"@biomejs/cli-darwin-arm64@npm:1.7.0":
-  version: 1.7.0
-  resolution: "@biomejs/cli-darwin-arm64@npm:1.7.0"
+"@biomejs/cli-darwin-arm64@npm:1.9.4":
+  version: 1.9.4
+  resolution: "@biomejs/cli-darwin-arm64@npm:1.9.4"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@biomejs/cli-darwin-x64@npm:1.7.0":
-  version: 1.7.0
-  resolution: "@biomejs/cli-darwin-x64@npm:1.7.0"
+"@biomejs/cli-darwin-x64@npm:1.9.4":
+  version: 1.9.4
+  resolution: "@biomejs/cli-darwin-x64@npm:1.9.4"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@biomejs/cli-linux-arm64-musl@npm:1.7.0":
-  version: 1.7.0
-  resolution: "@biomejs/cli-linux-arm64-musl@npm:1.7.0"
+"@biomejs/cli-linux-arm64-musl@npm:1.9.4":
+  version: 1.9.4
+  resolution: "@biomejs/cli-linux-arm64-musl@npm:1.9.4"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@biomejs/cli-linux-arm64@npm:1.7.0":
-  version: 1.7.0
-  resolution: "@biomejs/cli-linux-arm64@npm:1.7.0"
+"@biomejs/cli-linux-arm64@npm:1.9.4":
+  version: 1.9.4
+  resolution: "@biomejs/cli-linux-arm64@npm:1.9.4"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@biomejs/cli-linux-x64-musl@npm:1.7.0":
-  version: 1.7.0
-  resolution: "@biomejs/cli-linux-x64-musl@npm:1.7.0"
+"@biomejs/cli-linux-x64-musl@npm:1.9.4":
+  version: 1.9.4
+  resolution: "@biomejs/cli-linux-x64-musl@npm:1.9.4"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@biomejs/cli-linux-x64@npm:1.7.0":
-  version: 1.7.0
-  resolution: "@biomejs/cli-linux-x64@npm:1.7.0"
+"@biomejs/cli-linux-x64@npm:1.9.4":
+  version: 1.9.4
+  resolution: "@biomejs/cli-linux-x64@npm:1.9.4"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@biomejs/cli-win32-arm64@npm:1.7.0":
-  version: 1.7.0
-  resolution: "@biomejs/cli-win32-arm64@npm:1.7.0"
+"@biomejs/cli-win32-arm64@npm:1.9.4":
+  version: 1.9.4
+  resolution: "@biomejs/cli-win32-arm64@npm:1.9.4"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@biomejs/cli-win32-x64@npm:1.7.0":
-  version: 1.7.0
-  resolution: "@biomejs/cli-win32-x64@npm:1.7.0"
+"@biomejs/cli-win32-x64@npm:1.9.4":
+  version: 1.9.4
+  resolution: "@biomejs/cli-win32-x64@npm:1.9.4"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -3423,6 +3423,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/core@npm:^1.6.0":
+  version: 1.6.7
+  resolution: "@floating-ui/core@npm:1.6.7"
+  dependencies:
+    "@floating-ui/utils": "npm:^0.2.7"
+  checksum: e15fbb49830bef39c4ce2b2d00febc0140939c1f86f0441e38e43cbe83456fd05be674812bf747bce425318d8730e3c51c291104115f8637ce7bce2f00446743
+  languageName: node
+  linkType: hard
+
+"@floating-ui/dom@npm:^1.5.3":
+  version: 1.6.10
+  resolution: "@floating-ui/dom@npm:1.6.10"
+  dependencies:
+    "@floating-ui/core": "npm:^1.6.0"
+    "@floating-ui/utils": "npm:^0.2.7"
+  checksum: c100f5ecb37fc1bea4e551977eae3992f8eba351e6b7f2642e2f84a4abd269406d5a46a14505bc583caf25ddee900a667829244c4eecf1cf60f08c1dabdf3ee9
+  languageName: node
+  linkType: hard
+
+"@floating-ui/utils@npm:^0.2.7":
+  version: 0.2.7
+  resolution: "@floating-ui/utils@npm:0.2.7"
+  checksum: 56b1bb3f73f6ec9aabf9b1fd3dc584e0f2384d319c1a6119050eab102ae6ca8b9b0eed711c2f235ffe035188cbe9727bf36e8dcb54c8bd32176737e4be47efa8
+  languageName: node
+  linkType: hard
+
 "@formatjs/ecma402-abstract@npm:1.18.0":
   version: 1.18.0
   resolution: "@formatjs/ecma402-abstract@npm:1.18.0"
@@ -4255,6 +4281,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@interactjs/types@npm:1.10.27":
+  version: 1.10.27
+  resolution: "@interactjs/types@npm:1.10.27"
+  checksum: 0555e444f61e8dd0ea2251a301e2039b69037d02409f248ac5da0827928d855d3cea28b2770b73a9f72bfae947b6e06e6b6effe88a2c98c42e17444777aad4dd
+  languageName: node
+  linkType: hard
+
 "@ioredis/commands@npm:^1.1.1":
   version: 1.2.0
   resolution: "@ioredis/commands@npm:1.2.0"
@@ -4365,6 +4398,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@juggle/resize-observer@npm:^3.4.0":
+  version: 3.4.0
+  resolution: "@juggle/resize-observer@npm:3.4.0"
+  checksum: 73d1d00ee9132fb6f0aea0531940a6b93603e935590bd450fc6285a328d906102eeeb95dea77b2edac0e779031a9708aa8c82502bd298ee4dd26e7dff48f397a
+  languageName: node
+  linkType: hard
+
 "@kamilkisiela/fast-url-parser@npm:^1.1.4":
   version: 1.1.4
   resolution: "@kamilkisiela/fast-url-parser@npm:1.1.4"
@@ -4683,9 +4723,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@lukso/web-components@npm:1.88.0":
-  version: 1.88.0
-  resolution: "@lukso/web-components@npm:1.88.0"
+"@lukso/web-components@npm:1.99.0":
+  version: 1.99.0
+  resolution: "@lukso/web-components@npm:1.99.0"
   dependencies:
     clsx: "npm:^2.0.0"
     ethereum-blockies-base64: "npm:^1.0.2"
@@ -4693,7 +4733,7 @@ __metadata:
     tailwind-variants: "npm:^0.2.1"
     tippy.js: "npm:^6.3.7"
     web3-utils: "npm:^4.3.1"
-  checksum: 425eac1e7be5a58008d7dc5f1e2cb69f289760a34007ef266451bd312652cb102179649495c097ddff6a19d59a5c67e8919bc76558694969ce1347824fd807f2
+  checksum: a5c05a761ee514ae0e68d685d72d86a78293655d3a651e2fb790f2525bb028aeeb36a588e098db5baa92ff963e25010c91a20e11344e8f7b59caa5309afb9476
   languageName: node
   linkType: hard
 
@@ -6075,6 +6115,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@pinata/sdk@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "@pinata/sdk@npm:2.1.0"
+  dependencies:
+    axios: "npm:^0.21.1"
+    form-data: "npm:^2.3.3"
+    is-ipfs: "npm:^0.6.0"
+    path: "npm:^0.12.7"
+  checksum: 715a90987defa7056dfde6c698b5ccb2b53fcde53f2469b97ec004e7f0f84ccd0ef2bdb71bf4dbe4d6cca238849b49b0c84832cd164c6a2a6d82732e72d7bd15
+  languageName: node
+  linkType: hard
+
 "@pinia-orm/normalizr@npm:>=1.7.0":
   version: 1.7.0
   resolution: "@pinia-orm/normalizr@npm:1.7.0"
@@ -7190,6 +7242,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tsndr/cloudflare-worker-jwt@npm:^2.5.4":
+  version: 2.5.4
+  resolution: "@tsndr/cloudflare-worker-jwt@npm:2.5.4"
+  checksum: 563982427da11b51f574d77ce6f62ff67c1d87fde6e5954d725b131f325968bbdfef3fed3871f4357e043e0f250b13e35121afd4ae4e205954531594a8097c10
+  languageName: node
+  linkType: hard
+
 "@tufjs/canonical-json@npm:2.0.0":
   version: 2.0.0
   resolution: "@tufjs/canonical-json@npm:2.0.0"
@@ -7345,6 +7404,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/isomorphic-fetch@npm:^0.0.39":
+  version: 0.0.39
+  resolution: "@types/isomorphic-fetch@npm:0.0.39"
+  checksum: 24d81e968d39599d179ced4b029725c964c64200a57d2fd90c7484a157bf56268f9464a09274338adb8c949b3b30dce7b5b4564c0b9b336d60dd9e88500a27bf
+  languageName: node
+  linkType: hard
+
 "@types/js-yaml@npm:^4.0.0":
   version: 4.0.9
   resolution: "@types/js-yaml@npm:4.0.9"
@@ -7516,6 +7582,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/tinycolor2@npm:^1":
+  version: 1.4.6
+  resolution: "@types/tinycolor2@npm:1.4.6"
+  checksum: a662fd177135d27779b7ccba39881a85167f969787c71c7bf51903d288a519ad5b9526e0a4af7bde6444df6b7abe88bae893d569c6d804108c03dfec9509bdf6
+  languageName: node
+  linkType: hard
+
 "@types/trusted-types@npm:^2.0.2":
   version: 2.0.7
   resolution: "@types/trusted-types@npm:2.0.7"
@@ -7530,6 +7603,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/uuid@npm:^10":
+  version: 10.0.0
+  resolution: "@types/uuid@npm:10.0.0"
+  checksum: e3958f8b0fe551c86c14431f5940c3470127293280830684154b91dc7eb3514aeb79fe3216968833cf79d4d1c67f580f054b5be2cd562bebf4f728913e73e944
+  languageName: node
+  linkType: hard
+
 "@types/web-bluetooth@npm:^0.0.20":
   version: 0.0.20
   resolution: "@types/web-bluetooth@npm:0.0.20"
@@ -7839,6 +7919,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vexip-ui/hooks@npm:^2.4.0":
+  version: 2.5.0
+  resolution: "@vexip-ui/hooks@npm:2.5.0"
+  dependencies:
+    "@floating-ui/dom": "npm:^1.5.3"
+    "@juggle/resize-observer": "npm:^3.4.0"
+    "@vexip-ui/utils": "npm:2.15.0"
+  peerDependencies:
+    vue: ^3.2.25
+  checksum: e63bee55e3f052b19399b91d8e3d06b15b6610c96bc6d85b8388c2f090e1868badc0126a5a069a5463cc931cb6c7ab414c022356fd2f5f0e74bc7819b5b91c46
+  languageName: node
+  linkType: hard
+
+"@vexip-ui/utils@npm:2.15.0":
+  version: 2.15.0
+  resolution: "@vexip-ui/utils@npm:2.15.0"
+  checksum: 6219480d0be5344596f2c8a39d8eb93fcd98d026e476b303bee5ee555a87c45eda7c5ad51be0100049d9b99bc0fa438de2276519af7476842fb491461464221d
+  languageName: node
+  linkType: hard
+
+"@vexip-ui/utils@npm:^2.13.0":
+  version: 2.16.1
+  resolution: "@vexip-ui/utils@npm:2.16.1"
+  checksum: 31bfd8ef55952dc0dd8882a7deba7742302e238c99caba03fdb080ed2e4e4d50d58bc6976406b1a0140de79dee6d13ed0a0c1c05fbb1789287901d494dafefca
+  languageName: node
+  linkType: hard
+
 "@vite-pwa/nuxt@npm:^0.6.0":
   version: 0.6.0
   resolution: "@vite-pwa/nuxt@npm:0.6.0"
@@ -8268,31 +8375,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vueuse/core@npm:^10.9.0":
-  version: 10.9.0
-  resolution: "@vueuse/core@npm:10.9.0"
+"@vueuse/core@npm:^11.0.1":
+  version: 11.0.1
+  resolution: "@vueuse/core@npm:11.0.1"
   dependencies:
     "@types/web-bluetooth": "npm:^0.0.20"
-    "@vueuse/metadata": "npm:10.9.0"
-    "@vueuse/shared": "npm:10.9.0"
-    vue-demi: "npm:>=0.14.7"
-  checksum: 8bfbe2de24dec59437495db8cae8ef7dd480bde59b838641e9770da4f5b18973a15d0292df806a81bbe714d9c339ba8967f6803da66866c903a4fb6601f1888a
+    "@vueuse/metadata": "npm:11.0.1"
+    "@vueuse/shared": "npm:11.0.1"
+    vue-demi: "npm:>=0.14.10"
+  checksum: c512c03cb8d450c33f2a6ec5f8df55e2b8428bcce024749f56d2f93d6c82f7c54f2a035458c2d988cba6143f9a83da34fa9d5b24e775f0870abffb1d2dcee3f7
   languageName: node
   linkType: hard
 
-"@vueuse/metadata@npm:10.9.0":
-  version: 10.9.0
-  resolution: "@vueuse/metadata@npm:10.9.0"
-  checksum: f32c3a4c1a572a6873223fe973c24b6eaf8ed398be383ebb9bc95ab837a9ee1e23126afa966f3fdea68767883e6b12528fe997f0c393f9ce017d345c72fc715c
+"@vueuse/metadata@npm:11.0.1":
+  version: 11.0.1
+  resolution: "@vueuse/metadata@npm:11.0.1"
+  checksum: ed1c617a2e875180ba1c223e16bad330bc18a03698a4305285f6d5c714da7c3ebdaea0050e1e4bb1226b07a2a5164af146d0ce209f8b1f92084d205e6313d2c8
   languageName: node
   linkType: hard
 
-"@vueuse/shared@npm:10.9.0":
-  version: 10.9.0
-  resolution: "@vueuse/shared@npm:10.9.0"
+"@vueuse/shared@npm:11.0.1":
+  version: 11.0.1
+  resolution: "@vueuse/shared@npm:11.0.1"
   dependencies:
-    vue-demi: "npm:>=0.14.7"
-  checksum: 8e81358b695c471c0d5e2ac369dedfe29a4fe0188f7573aa71dc9e6a22ba0eb2e2fbca0f0a075a2ce626342ce5515a08ed7d9cb03d080326af32c8d116ae2381
+    vue-demi: "npm:>=0.14.10"
+  checksum: 2800cad5c1ed73a5bb812d130f34d035ab3cd5beadec4075d86c7bcc5428b81a2a5950b42de869d3cef3c3dc690e005a100957d3ad7efdfca899ab100ba7581d
   languageName: node
   linkType: hard
 
@@ -9388,6 +9495,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"axios@npm:^0.21.1":
+  version: 0.21.4
+  resolution: "axios@npm:0.21.4"
+  dependencies:
+    follow-redirects: "npm:^1.14.0"
+  checksum: da644592cb6f8f9f8c64fdabd7e1396d6769d7a4c1ea5f8ae8beb5c2eb90a823e3a574352b0b934ac62edc762c0f52647753dc54f7d07279127a7e5c4cd20272
+  languageName: node
+  linkType: hard
+
 "axios@npm:^1.3.4":
   version: 1.6.5
   resolution: "axios@npm:1.6.5"
@@ -9816,7 +9932,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bs58@npm:^4.0.0":
+"bs58@npm:^4.0.0, bs58@npm:^4.0.1":
   version: 4.0.1
   resolution: "bs58@npm:4.0.1"
   dependencies:
@@ -10431,7 +10547,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cids@npm:^0.7.1":
+"cids@npm:^0.7.1, cids@npm:~0.7.0":
   version: 0.7.5
   resolution: "cids@npm:0.7.5"
   dependencies:
@@ -10444,6 +10560,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cids@npm:~0.8.0":
+  version: 0.8.3
+  resolution: "cids@npm:0.8.3"
+  dependencies:
+    buffer: "npm:^5.6.0"
+    class-is: "npm:^1.1.0"
+    multibase: "npm:^1.0.0"
+    multicodec: "npm:^1.0.1"
+    multihashes: "npm:^1.0.1"
+  checksum: 2772d22314e80e4baf3ca3c82b0468b712ab342472ede571609837438fba1d24259cd3c6d9751a868485d8bc373c122f6847b0df91b16cd77ce65f7709294ec9
+  languageName: node
+  linkType: hard
+
 "cipher-base@npm:^1.0.0, cipher-base@npm:^1.0.1, cipher-base@npm:^1.0.3":
   version: 1.0.4
   resolution: "cipher-base@npm:1.0.4"
@@ -12651,15 +12780,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-tailwindcss@npm:^3.14.3":
-  version: 3.14.3
-  resolution: "eslint-plugin-tailwindcss@npm:3.14.3"
+"eslint-plugin-tailwindcss@npm:^3.17.5":
+  version: 3.17.5
+  resolution: "eslint-plugin-tailwindcss@npm:3.17.5"
   dependencies:
     fast-glob: "npm:^3.2.5"
     postcss: "npm:^8.4.4"
   peerDependencies:
     tailwindcss: ^3.4.0
-  checksum: f2fcd403c1e5c31bb7d4f9d87c94fd729e1ae2e808b9a92d25f85c52ccdccd26d046bfc2a92cbaf9d848777ad25588b326518e8e185e76aee9ada753430fa753
+  checksum: 6d3dd00c65873064fd7e3c3146b289e4ca67fd3ab5140f4bc0fb6d618e822e71361fdc9d600be2658c04251a3e0d9ac7c50173fecb58ff825577faaa7b01fe44
   languageName: node
   linkType: hard
 
@@ -13724,6 +13853,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"follow-redirects@npm:^1.14.0":
+  version: 1.15.9
+  resolution: "follow-redirects@npm:1.15.9"
+  peerDependenciesMeta:
+    debug:
+      optional: true
+  checksum: e3ab42d1097e90d28b913903841e6779eb969b62a64706a3eb983e894a5db000fbd89296f45f08885a0e54cd558ef62e81be1165da9be25a6c44920da10f424c
+  languageName: node
+  linkType: hard
+
 "follow-redirects@npm:^1.15.4":
   version: 1.15.5
   resolution: "follow-redirects@npm:1.15.5"
@@ -13767,6 +13906,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"form-data@npm:^2.3.3":
+  version: 2.5.1
+  resolution: "form-data@npm:2.5.1"
+  dependencies:
+    asynckit: "npm:^0.4.0"
+    combined-stream: "npm:^1.0.6"
+    mime-types: "npm:^2.1.12"
+  checksum: 2e2e5e927979ba3623f9b4c4bcc939275fae3f2dea9dafc8db3ca656a3d75476605de2c80f0e6f1487987398e056f0b4c738972d6e1edd83392d5686d0952eed
+  languageName: node
+  linkType: hard
+
 "form-data@npm:^4.0.0":
   version: 4.0.0
   resolution: "form-data@npm:4.0.0"
@@ -14563,6 +14713,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"grid-layout-plus@npm:^1.0.5":
+  version: 1.0.5
+  resolution: "grid-layout-plus@npm:1.0.5"
+  dependencies:
+    "@vexip-ui/hooks": "npm:^2.4.0"
+    "@vexip-ui/utils": "npm:^2.13.0"
+    interactjs: "npm:^1.10.26"
+  peerDependencies:
+    vue: ^3.0.0
+  checksum: 8199ec816ef7956a4393e2e752b50256090af743f083680e8dd0f93ad0f88b41486bdc0aeaee5e508b8f011bdcf0df88d0d1bf2d37a64f65af30dd0f0d8fa659
+  languageName: node
+  linkType: hard
+
 "gzip-size@npm:^7.0.0":
   version: 7.0.0
   resolution: "gzip-size@npm:7.0.0"
@@ -15352,6 +15515,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"interactjs@npm:^1.10.26":
+  version: 1.10.27
+  resolution: "interactjs@npm:1.10.27"
+  dependencies:
+    "@interactjs/types": "npm:1.10.27"
+  checksum: d92f323ad42617e4831cfb9035cba359ba99ea1df52197587d0c1e814c58b56699bdd357345ab52ed47ea556ab177bc1da75f2e52bd2e572d0a7d72b5c644ff3
+  languageName: node
+  linkType: hard
+
 "internal-slot@npm:^1.0.4, internal-slot@npm:^1.0.7":
   version: 1.0.7
   resolution: "internal-slot@npm:1.0.7"
@@ -15412,6 +15584,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ip-regex@npm:^4.0.0":
+  version: 4.3.0
+  resolution: "ip-regex@npm:4.3.0"
+  checksum: 7ff904b891221b1847f3fdf3dbb3e6a8660dc39bc283f79eb7ed88f5338e1a3d1104b779bc83759159be266249c59c2160e779ee39446d79d4ed0890dfd06f08
+  languageName: node
+  linkType: hard
+
 "ip@npm:^2.0.0":
   version: 2.0.0
   resolution: "ip@npm:2.0.0"
@@ -15690,6 +15869,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-ip@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "is-ip@npm:3.1.0"
+  dependencies:
+    ip-regex: "npm:^4.0.0"
+  checksum: da2c2b282407194adf2320bade0bad94be9c9d0bdab85ff45b1b62d8185f31c65dff3884519d57bf270277e5ea2046c7916a6e5a6db22fe4b7ddcdd3760f23eb
+  languageName: node
+  linkType: hard
+
+"is-ipfs@npm:^0.6.0":
+  version: 0.6.3
+  resolution: "is-ipfs@npm:0.6.3"
+  dependencies:
+    bs58: "npm:^4.0.1"
+    cids: "npm:~0.7.0"
+    mafmt: "npm:^7.0.0"
+    multiaddr: "npm:^7.2.1"
+    multibase: "npm:~0.6.0"
+    multihashes: "npm:~0.4.13"
+  checksum: 764f0c5837f266ee3940e3ebf098fa5797e2eef0224b226dd3bba094d099130897f9de8aadbb15e98f1df5810dfe2e511895dd2be2746f598dc9a07c5664694d
+  languageName: node
+  linkType: hard
+
 "is-lambda@npm:^1.0.1":
   version: 1.0.1
   resolution: "is-lambda@npm:1.0.1"
@@ -16055,6 +16257,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"isomorphic-fetch@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "isomorphic-fetch@npm:3.0.0"
+  dependencies:
+    node-fetch: "npm:^2.6.1"
+    whatwg-fetch: "npm:^3.4.1"
+  checksum: 568fe0307528c63405c44dd3873b7b6c96c0d19ff795cb15846e728b6823bdbc68cc8c97ac23324509661316f12f551e43dac2929bc7030b8bc4d6aa1158b857
+  languageName: node
+  linkType: hard
+
 "isomorphic-unfetch@npm:3.1.0":
   version: 3.1.0
   resolution: "isomorphic-unfetch@npm:3.1.0"
@@ -17191,6 +17403,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mafmt@npm:^7.0.0":
+  version: 7.1.0
+  resolution: "mafmt@npm:7.1.0"
+  dependencies:
+    multiaddr: "npm:^7.3.0"
+  checksum: b81405cb133b8e0a6787cc0e1529ddaf6a47478811a14190c048e5a6c260f99e118b3df00ca60caccbe20a63b5eacf8ffe29950102932137ea36f962196fcea4
+  languageName: node
+  linkType: hard
+
 "magic-string-ast@npm:^0.3.0":
   version: 0.3.0
   resolution: "magic-string-ast@npm:0.3.0"
@@ -17933,6 +18154,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"multiaddr@npm:^7.2.1, multiaddr@npm:^7.3.0":
+  version: 7.5.0
+  resolution: "multiaddr@npm:7.5.0"
+  dependencies:
+    buffer: "npm:^5.5.0"
+    cids: "npm:~0.8.0"
+    class-is: "npm:^1.1.0"
+    is-ip: "npm:^3.1.0"
+    multibase: "npm:^0.7.0"
+    varint: "npm:^5.0.0"
+  checksum: 4ac0a4c3c416dd8dd310591783c7c7d30ede61a25f17ab2ffd0ec687b235ea697745ee26ba92f8725763162c8366a71eda031b4281b83392a5fba85490b9dfb1
+  languageName: node
+  linkType: hard
+
 "multibase@npm:^0.7.0":
   version: 0.7.0
   resolution: "multibase@npm:0.7.0"
@@ -17943,6 +18178,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"multibase@npm:^1.0.0, multibase@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "multibase@npm:1.0.1"
+  dependencies:
+    base-x: "npm:^3.0.8"
+    buffer: "npm:^5.5.0"
+  checksum: f04306f3e809ea1d49330d87ebb6b93878182bc782b58790c2044aa2f4f0a625f5e8a155b4e1b6f327a6315f005ce49dd1e3b7fc13136895ff43ed1f42276d6d
+  languageName: node
+  linkType: hard
+
 "multibase@npm:~0.6.0":
   version: 0.6.1
   resolution: "multibase@npm:0.6.1"
@@ -17962,7 +18207,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"multicodec@npm:^1.0.0":
+"multicodec@npm:^1.0.0, multicodec@npm:^1.0.1":
   version: 1.0.4
   resolution: "multicodec@npm:1.0.4"
   dependencies:
@@ -17979,7 +18224,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"multihashes@npm:^0.4.15, multihashes@npm:~0.4.15":
+"multihashes@npm:^0.4.15, multihashes@npm:~0.4.13, multihashes@npm:~0.4.15":
   version: 0.4.21
   resolution: "multihashes@npm:0.4.21"
   dependencies:
@@ -17990,6 +18235,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"multihashes@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "multihashes@npm:1.0.1"
+  dependencies:
+    buffer: "npm:^5.6.0"
+    multibase: "npm:^1.0.1"
+    varint: "npm:^5.0.0"
+  checksum: 99b1c5321265b5a16073a38f4fbd8952bf7dbf7362d90961e0b2838c7798ec463b81021d4bf1c5314ec7ad39d1eaf533acc672156bbe3cf771663348b7f2721d
+  languageName: node
+  linkType: hard
+
 "mute-stream@npm:0.0.8":
   version: 0.0.8
   resolution: "mute-stream@npm:0.0.8"
@@ -19353,6 +19609,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path@npm:^0.12.7":
+  version: 0.12.7
+  resolution: "path@npm:0.12.7"
+  dependencies:
+    process: "npm:^0.11.1"
+    util: "npm:^0.10.3"
+  checksum: d49d101f9596613cf4cd1d4ebc4e64ba9a9df5d9cd75a410cfe87a88ce4bf0e2617ff44b92025376f7ecb02e88a6308b27f7f39d810f2335a5126f762487adfb
+  languageName: node
+  linkType: hard
+
 "pathe@npm:^1.1.0, pathe@npm:^1.1.1":
   version: 1.1.1
   resolution: "pathe@npm:1.1.1"
@@ -20174,14 +20440,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier-plugin-tailwindcss@npm:^0.5.11":
-  version: 0.5.11
-  resolution: "prettier-plugin-tailwindcss@npm:0.5.11"
+"prettier-plugin-tailwindcss@npm:^0.5.14":
+  version: 0.5.14
+  resolution: "prettier-plugin-tailwindcss@npm:0.5.14"
   peerDependencies:
     "@ianvs/prettier-plugin-sort-imports": "*"
     "@prettier/plugin-pug": "*"
     "@shopify/prettier-plugin-liquid": "*"
     "@trivago/prettier-plugin-sort-imports": "*"
+    "@zackad/prettier-plugin-twig-melody": "*"
     prettier: ^3.0
     prettier-plugin-astro: "*"
     prettier-plugin-css-order: "*"
@@ -20190,6 +20457,7 @@ __metadata:
     prettier-plugin-marko: "*"
     prettier-plugin-organize-attributes: "*"
     prettier-plugin-organize-imports: "*"
+    prettier-plugin-sort-imports: "*"
     prettier-plugin-style-order: "*"
     prettier-plugin-svelte: "*"
   peerDependenciesMeta:
@@ -20201,6 +20469,8 @@ __metadata:
       optional: true
     "@trivago/prettier-plugin-sort-imports":
       optional: true
+    "@zackad/prettier-plugin-twig-melody":
+      optional: true
     prettier-plugin-astro:
       optional: true
     prettier-plugin-css-order:
@@ -20215,22 +20485,22 @@ __metadata:
       optional: true
     prettier-plugin-organize-imports:
       optional: true
+    prettier-plugin-sort-imports:
+      optional: true
     prettier-plugin-style-order:
       optional: true
     prettier-plugin-svelte:
       optional: true
-    prettier-plugin-twig-melody:
-      optional: true
-  checksum: 79d294c035845f35dbf4cdb0707c3da235dd9c0eb5d2a7db9d779da9efdd8851dbb435646d872f507e55657dc348050c5a15fcbed09d00ef95359ccfa50ff400
+  checksum: 8cb1e9d914012bfe42b23ba8d31fb3fe17abbbb18ad8ba33e6b81c05a92f7e1dd46836179cde7cf036a628081c9e4bbdf971b17f45844a139781e807b81229a9
   languageName: node
   linkType: hard
 
-"prettier@npm:3.2.5":
-  version: 3.2.5
-  resolution: "prettier@npm:3.2.5"
+"prettier@npm:3.3.3":
+  version: 3.3.3
+  resolution: "prettier@npm:3.3.3"
   bin:
     prettier: bin/prettier.cjs
-  checksum: d509f9da0b70e8cacc561a1911c0d99ec75117faed27b95cc8534cb2349667dee6351b0ca83fa9d5703f14127faa52b798de40f5705f02d843da133fc3aa416a
+  checksum: 5beac1f30b5b40162532b8e2f7c3a4eb650910a2695e9c8512a62ffdc09dae93190c29db9107fa7f26d1b6c71aad3628ecb9b5de1ecb0911191099be109434d7
   languageName: node
   linkType: hard
 
@@ -20300,7 +20570,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"process@npm:^0.11.10":
+"process@npm:^0.11.1, process@npm:^0.11.10":
   version: 0.11.10
   resolution: "process@npm:0.11.10"
   checksum: dbaa7e8d1d5cf375c36963ff43116772a989ef2bb47c9bdee20f38fd8fc061119cf38140631cf90c781aca4d3f0f0d2c834711952b728953f04fd7d238f59f5b
@@ -22032,6 +22302,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sortablejs@npm:1.14.0":
+  version: 1.14.0
+  resolution: "sortablejs@npm:1.14.0"
+  checksum: 434e0caaabfac2b4f48e102cc40e12fd0af7dc99f14838005e6429e92cc190f0ccfb48b0cb8deed8a9b808543f926e2aad26aa89277ee036e5b4ee959ae47f9e
+  languageName: node
+  linkType: hard
+
 "source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.1, source-map-js@npm:^1.0.2":
   version: 1.0.2
   resolution: "source-map-js@npm:1.0.2"
@@ -23154,6 +23431,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tinycolor2@npm:^1.6.0":
+  version: 1.6.0
+  resolution: "tinycolor2@npm:1.6.0"
+  checksum: 066c3acf4f82b81c58a0d3ab85f49407efe95ba87afc3c7a16b1d77625193dfbe10dd46c26d0a263c1137361dd5a6a68bff2fb71def5fb9b9aec940fb030bcd4
+  languageName: node
+  linkType: hard
+
 "tinypool@npm:^0.8.3":
   version: 0.8.4
   resolution: "tinypool@npm:0.8.4"
@@ -23952,18 +24236,19 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "universalprofile.cloud@workspace:."
   dependencies:
-    "@biomejs/biome": "npm:^1.7.0"
+    "@biomejs/biome": "npm:^1.9.4"
     "@erc725/erc725.js": "npm:^0.25.0"
     "@esbuild-plugins/node-globals-polyfill": "npm:0.2.3"
     "@formatjs/intl": "npm:^2.9.9"
     "@google/model-viewer": "npm:^3.4.0"
     "@lukso/lsp-smart-contracts": "npm:0.15.0-rc.5"
-    "@lukso/web-components": "npm:1.88.0"
+    "@lukso/web-components": "npm:1.99.0"
     "@nuxt/test-utils": "npm:^3.13.1"
     "@nuxtjs/algolia": "npm:^1.10.2"
     "@nuxtjs/device": "npm:^3.1.1"
     "@nuxtjs/plausible": "npm:^0.2.4"
     "@nuxtjs/tailwindcss": "npm:^6.11.4"
+    "@pinata/sdk": "npm:^2.1.0"
     "@pinia-orm/nuxt": "npm:^1.7.0"
     "@pinia-plugin-persistedstate/nuxt": "npm:^1.2.0"
     "@pinia/nuxt": "npm:^0.5.1"
@@ -23980,19 +24265,23 @@ __metadata:
     "@tanstack/vue-query": "npm:^5.25.0"
     "@tanstack/vue-query-devtools": "npm:^5.25.0"
     "@testing-library/vue": "npm:^8.1.0"
+    "@tsndr/cloudflare-worker-jwt": "npm:^2.5.4"
     "@typechain/web3-v1": "npm:^6.0.7"
     "@types/debug": "npm:^4"
     "@types/fs-extra": "npm:11.0.4"
+    "@types/isomorphic-fetch": "npm:^0.0.39"
     "@types/mime-types": "npm:^2"
     "@types/node": "npm:^20.11.24"
     "@types/randombytes": "npm:2.0.3"
     "@types/three": "npm:^0.162.0"
+    "@types/tinycolor2": "npm:^1"
+    "@types/uuid": "npm:^10"
     "@typescript-eslint/eslint-plugin": "npm:7.1.1"
     "@typescript-eslint/parser": "npm:7.1.1"
     "@vite-pwa/nuxt": "npm:^0.6.0"
     "@vitest/ui": "npm:^1.6.0"
     "@vue/test-utils": "npm:^2.4.6"
-    "@vueuse/core": "npm:^10.9.0"
+    "@vueuse/core": "npm:^11.0.1"
     "@walletconnect/ethereum-provider": "npm:^2.14.0"
     assert: "npm:^2.1.0"
     bignumber.js: "npm:^9.1.2"
@@ -24007,14 +24296,17 @@ __metadata:
     eslint-plugin-import: "npm:2.29.1"
     eslint-plugin-json: "npm:3.1.0"
     eslint-plugin-playwright: "npm:1.5.2"
-    eslint-plugin-tailwindcss: "npm:^3.14.3"
+    eslint-plugin-tailwindcss: "npm:^3.17.5"
     eslint-plugin-testing-library: "npm:6.2.0"
     eslint-plugin-vue: "npm:9.22.0"
     ethereum-blockies-base64: "npm:^1.0.2"
+    form-data: "npm:^4.0.0"
     fs-extra: "npm:11.2.0"
+    grid-layout-plus: "npm:^1.0.5"
     happy-dom: "npm:^14.12.0"
     https-browserify: "npm:1.0.0"
     husky: "npm:9.0.11"
+    isomorphic-fetch: "npm:^3.0.0"
     js-sha3: "npm:^0.9.3"
     limiter: "npm:^2.1.0"
     lint-staged: "npm:15.2.2"
@@ -24027,8 +24319,8 @@ __metadata:
     pinia-orm: "npm:^1.7.2"
     postcss-custom-properties: "npm:^13.3.5"
     postcss-html: "npm:^1.6.0"
-    prettier: "npm:3.2.5"
-    prettier-plugin-tailwindcss: "npm:^0.5.11"
+    prettier: "npm:3.3.3"
+    prettier-plugin-tailwindcss: "npm:^0.5.14"
     qr-code-styling: "npm:^1.6.0-rc.1"
     rollup-plugin-polyfill-node: "npm:^0.13.0"
     sass: "npm:1.71.1"
@@ -24043,12 +24335,15 @@ __metadata:
     swiper: "npm:~11.1.4"
     tailwind-variants: "npm:^0.2.1"
     three: "npm:^0.162.0"
+    tinycolor2: "npm:^1.6.0"
     typechain: "npm:^8.3.2"
     typescript: "npm:5.3.3"
     util: "npm:0.12.5"
+    uuid: "npm:^10.0.0"
     vitest: "npm:^1.6.0"
     vue: "npm:^3.4.21"
     vue-router: "npm:^4.3.0"
+    vuedraggable: "npm:^4.1.0"
     web3: "npm:~1.10.4"
     web3-bzz: "npm:1.10.4"
     web3-utils: "npm:~1.10.4"
@@ -24057,6 +24352,7 @@ __metadata:
     workbox-precaching: "npm:^7.0.0"
     workbox-routing: "npm:^7.0.0"
     yata-fetch: "npm:2.1.5"
+    zod: "npm:^3.23.8"
   languageName: unknown
   linkType: soft
 
@@ -24468,6 +24764,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"util@npm:^0.10.3":
+  version: 0.10.4
+  resolution: "util@npm:0.10.4"
+  dependencies:
+    inherits: "npm:2.0.3"
+  checksum: 1200a1ca2b474758342b3a0c5261c56f14ef09ad7eeaec3e6f449f5776ecdfce09a153cad62652b823e74647cdcfd2918552eadd2434783dfb58dabc5061803a
+  languageName: node
+  linkType: hard
+
 "utils-merge@npm:1.0.1":
   version: 1.0.1
   resolution: "utils-merge@npm:1.0.1"
@@ -24475,6 +24780,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"uuid@npm:^10.0.0":
+  version: 10.0.0
+  resolution: "uuid@npm:10.0.0"
+  bin:
+    uuid: dist/bin/uuid
+  checksum: 35aa60614811a201ff90f8ca5e9ecb7076a75c3821e17f0f5ff72d44e36c2d35fcbc2ceee9c4ac7317f4cc41895da30e74f3885e30313bee48fda6338f250538
+  languageName: node
+  linkType: hard
+
 "uuid@npm:^3.3.2":
   version: 3.4.0
   resolution: "uuid@npm:3.4.0"
@@ -24945,6 +25259,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vue-demi@npm:>=0.14.10":
+  version: 0.14.10
+  resolution: "vue-demi@npm:0.14.10"
+  peerDependencies:
+    "@vue/composition-api": ^1.0.0-rc.1
+    vue: ^3.0.0-0 || ^2.6.0
+  peerDependenciesMeta:
+    "@vue/composition-api":
+      optional: true
+  bin:
+    vue-demi-fix: bin/vue-demi-fix.js
+    vue-demi-switch: bin/vue-demi-switch.js
+  checksum: 3028239c0c25a84361a13ab936fcc9a199f54e0320c2ec1d2f4fdf7da8bae663382b7c1e5b1f5a1a43f6aebc73b955892cd4b6c7b3eaf2b766e18cc2a6f7ebea
+  languageName: node
+  linkType: hard
+
 "vue-demi@npm:>=0.14.5":
   version: 0.14.6
   resolution: "vue-demi@npm:0.14.6"
@@ -24961,7 +25291,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue-demi@npm:>=0.14.7, vue-demi@npm:^0.14.6":
+"vue-demi@npm:^0.14.6":
   version: 0.14.7
   resolution: "vue-demi@npm:0.14.7"
   peerDependencies:
@@ -25068,6 +25398,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vuedraggable@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "vuedraggable@npm:4.1.0"
+  dependencies:
+    sortablejs: "npm:1.14.0"
+  peerDependencies:
+    vue: ^3.0.1
+  checksum: 87d4faba83ea27c0c262fcdbe7bc9791560079096a5a9d1dc191ebfe0a00f8324d33ebc15272c4067ddc32b1681534d17acafbe73d18c4cb2a8d99f19d86e74b
+  languageName: node
+  linkType: hard
+
 "wcwidth@npm:^1.0.1":
   version: 1.0.1
   resolution: "wcwidth@npm:1.0.1"
@@ -25533,6 +25874,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"whatwg-fetch@npm:^3.4.1":
+  version: 3.6.20
+  resolution: "whatwg-fetch@npm:3.6.20"
+  checksum: 2b4ed92acd6a7ad4f626a6cb18b14ec982bbcaf1093e6fe903b131a9c6decd14d7f9c9ca3532663c2759d1bdf01d004c77a0adfb2716a5105465c20755a8c57c
+  languageName: node
+  linkType: hard
+
 "whatwg-mimetype@npm:^3.0.0":
   version: 3.0.0
   resolution: "whatwg-mimetype@npm:3.0.0"
@@ -26256,3 +26604,10 @@ __metadata:
   checksum: 73622ca36a916f785cf528fe612a884b3e0f183dbe6b33365a7d0fc92abdbedf7804c5e2bd8df0a278e1472106d46674281397a3dd800fa9031dc3429758c6ac
   languageName: node
   linkType: hard
+
+"zod@npm:^3.23.8":
+  version: 3.23.8
+  resolution: "zod@npm:3.23.8"
+  checksum: 846fd73e1af0def79c19d510ea9e4a795544a67d5b34b7e1c4d0425bf6bfd1c719446d94cdfa1721c1987d891321d61f779e8236fde517dc0e524aa851a6eff1
+  languageName: node
+  linkType: hard