diff --git a/components/collection/HeroButtons.vue b/components/collection/HeroButtons.vue
index d2a2dd6e33..9e3939bea2 100644
--- a/components/collection/HeroButtons.vue
+++ b/components/collection/HeroButtons.vue
@@ -43,8 +43,10 @@
           </template>
 
           <NeoDropdownItem
-            v-clipboard:copy="currentCollectionUrl"
-            @click="toast(`${$i18n.t('toast.urlCopy')}`)">
+            @click="
+              toast(`${$i18n.t('toast.urlCopy')}`)
+              copy(currentCollectionUrl)
+            ">
             {{ $i18n.t('share.copyLink') }}
           </NeoDropdownItem>
           <NeoDropdownItem @click="QRModalActive = true">
@@ -124,6 +126,8 @@ const { urlPrefix } = usePrefix()
 const { $i18n } = useNuxtApp()
 const { toast } = useToast()
 
+const { copy } = useClipboard()
+
 const collectionId = computed(() => route.params.id)
 const currentCollectionUrl = computed(
   () =>
diff --git a/components/collection/unlockable/UnlockableHeroButtons.vue b/components/collection/unlockable/UnlockableHeroButtons.vue
index 0708567a7b..ab71843255 100644
--- a/components/collection/unlockable/UnlockableHeroButtons.vue
+++ b/components/collection/unlockable/UnlockableHeroButtons.vue
@@ -13,8 +13,10 @@
           </template>
 
           <NeoDropdownItem
-            v-clipboard:copy="currentUrl"
-            @click="toast(`${$i18n.t('toast.urlCopy')}`)">
+            @click="
+              toast(`${$i18n.t('toast.urlCopy')}`)
+              copy(currentUrl)
+            ">
             {{ $i18n.t('share.copyLink') }}
           </NeoDropdownItem>
           <NeoDropdownItem @click="QRModalActive = true">
@@ -52,6 +54,7 @@ import {
   NeoModal,
 } from '@kodadot1/brick'
 
+const { copy } = useClipboard()
 const { $i18n } = useNuxtApp()
 const currentUrl = computed(() => window.location.href)
 
diff --git a/components/common/ConnectWallet/WalletAssetIdentity.vue b/components/common/ConnectWallet/WalletAssetIdentity.vue
index 5649300969..321fd27f7c 100644
--- a/components/common/ConnectWallet/WalletAssetIdentity.vue
+++ b/components/common/ConnectWallet/WalletAssetIdentity.vue
@@ -6,7 +6,11 @@
       :prefix="urlPrefix"
       variant="button" />
     <div class="is-flex is-flex-direction-column">
-      <a v-clipboard:copy="account" @click="toast('Copied to clipboard')">
+      <a
+        @click="
+          toast('Copied to clipboard')
+          copy(account)
+        ">
         <NeoIcon icon="copy" />
       </a>
       <hr class="my-1" />
@@ -23,6 +27,7 @@ import { useIdentityStore } from '@/stores/identity'
 import { useShoppingCartStore } from '@/stores/shoppingCart'
 import useIdentity from '@/components/identity/utils/useIdentity'
 
+const { copy } = useClipboard()
 const identityStore = useIdentityStore()
 const shoppingCartStore = useShoppingCartStore()
 const { urlPrefix } = usePrefix()
diff --git a/components/gallery/GalleryItemButton/GalleryItemShareBtn.vue b/components/gallery/GalleryItemButton/GalleryItemShareBtn.vue
index 5f6c824ba0..405d9e03c3 100644
--- a/components/gallery/GalleryItemButton/GalleryItemShareBtn.vue
+++ b/components/gallery/GalleryItemButton/GalleryItemShareBtn.vue
@@ -10,8 +10,10 @@
       </template>
 
       <NeoDropdownItem
-        v-clipboard:copy="realworldFullPathShare"
-        @click="toast(String($t('toast.urlCopy')))">
+        @click="
+          toast(String($t('toast.urlCopy')))
+          copy(realworldFullPathShare)
+        ">
         Copy Link
       </NeoDropdownItem>
       <NeoDropdownItem @click="isModalActive = true">QR Code</NeoDropdownItem>
@@ -47,6 +49,7 @@ import { isMobileDevice } from '@/utils/extension'
 
 const QRCode = () => import('@/components/shared/QRCode.vue')
 
+const { copy } = useClipboard()
 const route = useRoute()
 const { $i18n } = useNuxtApp()
 const { toast } = useToast()
diff --git a/components/identity/module/IdentityLink.vue b/components/identity/module/IdentityLink.vue
index 71f13d79c1..0dbdf5c404 100644
--- a/components/identity/module/IdentityLink.vue
+++ b/components/identity/module/IdentityLink.vue
@@ -5,8 +5,10 @@
     </a>
     <a
       v-if="showClipboard"
-      v-clipboard:copy="address"
-      @click="toast('Copied to clipboard')">
+      @click="
+        toast('Copied to clipboard')
+        address ? copy(String(address)) : null
+      ">
       <svg
         width="13"
         height="13"
@@ -33,6 +35,8 @@ const props = defineProps<{
   address?: Address
   showClipboard?: boolean
 }>()
+
+const { copy } = useClipboard()
 const { toast } = useToast()
 const { urlPrefix } = usePrefix()
 
diff --git a/components/identity/module/IdentityPopoverHeader.vue b/components/identity/module/IdentityPopoverHeader.vue
index 9cf0fcf605..588ae56c2c 100644
--- a/components/identity/module/IdentityPopoverHeader.vue
+++ b/components/identity/module/IdentityPopoverHeader.vue
@@ -11,10 +11,13 @@
           >
         </nuxt-link>
         <NeoIcon
-          v-clipboard:copy="address"
           icon="copy"
           class="has-text-link is-clickable"
           data-cy="identity-clipboard"
+          @click.native="
+            toast('Copied to clipboard')
+            copy(String(address))
+          " />
           @click="toast('Copied to clipboard')" />
       </div>
       <a
@@ -36,6 +39,8 @@ const address = inject('address')
 const shortenedAddress = inject('shortenedAddress')
 
 const identity = inject<{ [x: string]: string }>('identity')
+
+const { copy } = useClipboard()
 const { urlPrefix } = usePrefix()
 const { toast } = useToast()
 </script>
diff --git a/components/landing/topCollections/TopCollectionsItem.vue b/components/landing/topCollections/TopCollectionsItem.vue
index f45ba331c2..17a15945af 100644
--- a/components/landing/topCollections/TopCollectionsItem.vue
+++ b/components/landing/topCollections/TopCollectionsItem.vue
@@ -72,6 +72,7 @@ import { calculateUsdFromToken } from '@/utils/calculation'
 import { CollectionEntityWithVolumes } from './utils/types'
 import { getChainNameByPrefix } from '@/utils/chain'
 import { useFiatStore } from '@/stores/fiat'
+import { truncateStr } from '@/utils/filters'
 
 const BasicImage = defineAsyncComponent(
   () => import('@/components/shared/view/BasicImage.vue')
diff --git a/components/profile/ProfileDetail.vue b/components/profile/ProfileDetail.vue
index 7fa2a534e5..37cee30634 100644
--- a/components/profile/ProfileDetail.vue
+++ b/components/profile/ProfileDetail.vue
@@ -62,10 +62,13 @@
 
             <div class="divider" />
             <NeoButton
-              v-clipboard:copy="id"
               variant="text"
               :label="$t('share.copyAddress')"
               no-shadow
+              @click.native="
+                toast(`${$i18n.t('general.copyToClipboard')}`)
+                copy(id)
+              " />
               @click="toast(`${$i18n.t('general.copyToClipboard')}`)" />
             <div class="divider" />
             <NeoButton
@@ -165,6 +168,8 @@ const { toast } = useToast()
 const { replaceUrl } = useReplaceUrl()
 const { accountId } = useAuth()
 const { urlPrefix } = usePrefix()
+const { copy } = useClipboard()
+
 const tabs = ['owned', 'created', 'collections', 'activity']
 
 const switchToTab = (tab: string) => {
diff --git a/components/transfer/Transfer.vue b/components/transfer/Transfer.vue
index f94d5b9670..689a68ca44 100644
--- a/components/transfer/Transfer.vue
+++ b/components/transfer/Transfer.vue
@@ -29,8 +29,10 @@
           </template>
 
           <NeoDropdownItem
-            v-clipboard:copy="generatePaymentLink(accountId)"
-            @click="toast(`${$i18n.t('toast.urlCopy')}`)">
+            @click="
+              toast(`${$i18n.t('toast.urlCopy')}`)
+              copy(generatePaymentLink(accountId))
+            ">
             <NeoIcon icon="sack-dollar" pack="fa" class="mr-2" />{{
               $t('transfers.payMeLink')
             }}
@@ -54,9 +56,11 @@
               <Identity :address="accountId" hide-identity-popover />
             </span>
             <a
-              v-clipboard:copy="accountId"
               class="ml-2"
-              @click="toast(`${$i18n.t('general.copyToClipboard')}`)">
+              @click="
+                toast(`${$i18n.t('general.copyToClipboard')}`)
+                copy(accountId)
+              ">
               <NeoIcon icon="copy" />
             </a>
           </div>
@@ -295,6 +299,8 @@ watch(isLoading, (newValue, oldValue) => {
   }
 })
 
+const { copy } = useClipboard({ source: accountId })
+
 export type TargetAddress = {
   address: string
   usd?: number | string
diff --git a/nuxt.config.js b/nuxt.config.js
index 98febdecd9..54c6e9556a 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -162,21 +162,19 @@ export default defineNuxtConfig({
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [
     { src: '~/plugins/polkadot', mode: 'client' },
-    // { src: '~/plugins/endpoint', mode: 'client' },
-    // { src: '~/plugins/seoMetaGenerator', mode: 'client' },
-    // { src: '~/plugins/keyboardEvents', mode: 'client' },
-    // { src: '~/plugins/consola', mode: 'client' },
-    // { src: '~/plugins/piniaPersistedState', mode: 'client' },
-    // { src: '~/plugins/oruga-modal', mode: 'client' },
-    // { src: '~/plugins/oruga-notification', mode: 'client' },
-    // '~/plugins/filters',
-    // '~/plugins/globalVariables',
-    // '~/plugins/pwa',
-    // '~/plugins/vueAudioVisual',
-    // '~/plugins/vueClipboard',
-    // '~/plugins/vueSocialSharing',
-    // '~/plugins/vueTippy',
-    // '~/plugins/safeHref',
+    { src: '~/plugins/endpoint', mode: 'client' },
+    { src: '~/plugins/seoMetaGenerator', mode: 'client' },
+    { src: '~/plugins/keyboardEvents.client', mode: 'client' },
+    { src: '~/plugins/consola', mode: 'client' },
+    { src: '~/plugins/piniaPersistedState', mode: 'client' },
+    { src: '~/plugins/oruga-modal', mode: 'client' },
+    { src: '~/plugins/oruga-notification', mode: 'client' },
+    '~/plugins/globalVariables',
+    '~/plugins/pwa',
+    '~/plugins/vueAudioVisual',
+    '~/plugins/vueSocialSharing',
+    '~/plugins/vueTippy',
+    '~/plugins/safeHref',
   ],
 
   router: {
diff --git a/plugins/icons.ts b/plugins/icons.client.ts
similarity index 98%
rename from plugins/icons.ts
rename to plugins/icons.client.ts
index d7051ab9a1..9f0b3ba022 100644
--- a/plugins/icons.ts
+++ b/plugins/icons.client.ts
@@ -1,4 +1,3 @@
-// import Vue from 'vue'
 import { Neo } from '@kodadot1/brick'
 
 import { config, library } from '@fortawesome/fontawesome-svg-core'
@@ -244,9 +243,6 @@ library.add(
   faX
 )
 
-// nuxt will handle css
-config.autoAddCss = false
-
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon).use(Neo, {
     iconComponent: 'font-awesome-icon',
@@ -261,4 +257,5 @@ export default defineNuxtPlugin((nuxtApp) => {
     //   },
     // },
   })
-})
+}
+)
diff --git a/plugins/keyboardEvents.ts b/plugins/keyboardEvents.client.ts
similarity index 96%
rename from plugins/keyboardEvents.ts
rename to plugins/keyboardEvents.client.ts
index 90f2602351..e6650dec2c 100644
--- a/plugins/keyboardEvents.ts
+++ b/plugins/keyboardEvents.client.ts
@@ -91,10 +91,6 @@ const listenGlobalKeyboardEvents = (app) => {
   })
 }
 
-// export default ({ app }): void => {
-//   listenGlobalKeyboardEvents(app)
-// }
-
 export default defineNuxtPlugin(({ vueApp }) =>
   listenGlobalKeyboardEvents(vueApp)
 )
diff --git a/plugins/vueTippy.ts b/plugins/vueTippy.ts
index facb185170..62144c2995 100644
--- a/plugins/vueTippy.ts
+++ b/plugins/vueTippy.ts
@@ -1,19 +1,27 @@
-// import Vue from 'vue'
-// import VueTippy, { TippyComponent, tippy } from 'vue-tippy'
+import VueTippy, { TippyComponent, tippy } from 'vue-tippy'
 
-// let activeTippyInstance
-// window.addEventListener('scroll', () => {
-//   if (activeTippyInstance && activeTippyInstance.state.isVisible) {
-//     activeTippyInstance.hide()
-//     activeTippyInstance.reference.blur()
-//   }
-// })
-// tippy.setDefaults({
-//   onShow(instance) {
-//     activeTippyInstance = instance
-//   },
-// })
+let activeTippyInstance
+window.addEventListener('scroll', () => {
+  if (activeTippyInstance && activeTippyInstance.state.isVisible) {
+    activeTippyInstance.hide()
+    activeTippyInstance.reference.blur()
+  }
+})
 
-// Vue.use(VueTippy)
-// Vue.component('VTippy', TippyComponent)
-export default defineNuxtPlugin(() => undefined)
+tippy.setDefaults({
+  onShow(instance) {
+    activeTippyInstance = instance
+  },
+})
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(VueTippy, {
+    directive: 'tippy',
+    component: 'v-tippy',
+    defaultProps: {
+      placement: 'auto-end',
+      allowHTML: true,
+    },
+  })
+  nuxtApp.vueApp.component('VTippy', TippyComponent)
+})