diff --git a/components/AppNavbar.vue b/components/AppNavbar.vue
index 0313ec74..9450118a 100644
--- a/components/AppNavbar.vue
+++ b/components/AppNavbar.vue
@@ -102,7 +102,7 @@ const handleNavigateMyUpDashboard = () => {
       <!-- Settings -->
       <div
         v-if="!isConnected"
-        class="ml-4 h-6 w-[1px] border-l border-purple-82 pl-4"
+        class="ml-4 h-6 w-px border-l border-purple-82 pl-4"
       >
         <lukso-icon
           name="settings"
diff --git a/components/AppNavbarLanding.vue b/components/AppNavbarLanding.vue
index e4df2d67..4df51161 100644
--- a/components/AppNavbarLanding.vue
+++ b/components/AppNavbarLanding.vue
@@ -107,10 +107,7 @@ const handleNavigateMyUpDashboard = () => {
       </lukso-button>
 
       <!-- Settings -->
-      <div
-        v-if="!isConnected"
-        class="h-6 w-[1px] border-l border-purple-82 pl-4"
-      >
+      <div v-if="!isConnected" class="h-6 w-px border-l border-purple-82 pl-4">
         <lukso-icon
           name="settings"
           color="purple-41"
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/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 d84f69ce..40980eb2 100644
--- a/components/AssetAssetsDocument.vue
+++ b/components/AssetAssetsDocument.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="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 8d3ba398..3e9c8914 100644
--- a/components/AssetAssetsOther.vue
+++ b/components/AssetAssetsOther.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="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/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/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 7688749b..2a1f42be 100644
--- a/components/DappShowcase.vue
+++ b/components/DappShowcase.vue
@@ -86,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] xl: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] xl: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/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/ProfileTabsItem.vue b/components/ProfileTabsItem.vue
index 72089369..1d9cef20 100644
--- a/components/ProfileTabsItem.vue
+++ b/components/ProfileTabsItem.vue
@@ -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: {
diff --git a/components/ProfileView.vue b/components/ProfileView.vue
index 913949b4..d450b775 100644
--- a/components/ProfileView.vue
+++ b/components/ProfileView.vue
@@ -177,7 +177,7 @@ watch(
       >
         {{ $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>
diff --git a/components/__tests__/__snapshots__/ProfileTabs.spec.ts.snap b/components/__tests__/__snapshots__/ProfileTabs.spec.ts.snap
index 9e7cc5f3..dba6fced 100644
--- a/components/__tests__/__snapshots__/ProfileTabs.spec.ts.snap
+++ b/components/__tests__/__snapshots__/ProfileTabs.spec.ts.snap
@@ -7,7 +7,7 @@ exports[`ProfileTabs > renders active state 1`] = `
       <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>
+      <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>"
@@ -20,7 +20,7 @@ exports[`ProfileTabs > renders default state 1`] = `
       <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>
+      <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/domains/graph/components/NftListCardGraph.vue b/domains/graph/components/NftListCardGraph.vue
index 04927e7b..bb746e3d 100644
--- a/domains/graph/components/NftListCardGraph.vue
+++ b/domains/graph/components/NftListCardGraph.vue
@@ -156,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 -->
diff --git a/domains/grid/components/AddWidgetSelection.vue b/domains/grid/components/AddWidgetSelection.vue
index a1022057..afed3dea 100644
--- a/domains/grid/components/AddWidgetSelection.vue
+++ b/domains/grid/components/AddWidgetSelection.vue
@@ -57,7 +57,7 @@ const handleSelectWidget = (widgetType: GridWidgetType) => {
           :text="formatMessage('widget_type_iframe')"
         >
           <div
-            class="flex size-10 cursor-pointer items-center justify-center rounded-full bg-neutral-20 transition hover:scale-[1.05]"
+            class="flex size-10 cursor-pointer items-center justify-center rounded-full bg-neutral-20 transition hover:scale-105"
             @click="handleSelectWidget('IFRAME')"
           >
             <lukso-icon
@@ -85,7 +85,7 @@ const handleSelectWidget = (widgetType: GridWidgetType) => {
           :text="formatMessage('widget_type_image')"
         >
           <div
-            class="flex size-10 cursor-pointer items-center justify-center rounded-full bg-neutral-20 transition hover:scale-[1.05]"
+            class="flex size-10 cursor-pointer items-center justify-center rounded-full bg-neutral-20 transition hover:scale-105"
             @click="handleSelectWidget('IMAGE')"
           >
             <lukso-icon
@@ -103,7 +103,7 @@ const handleSelectWidget = (widgetType: GridWidgetType) => {
           :text="formatMessage('widget_type_text')"
         >
           <div
-            class="flex size-10 cursor-pointer items-center justify-center rounded-full bg-neutral-20 transition hover:scale-[1.05]"
+            class="flex size-10 cursor-pointer items-center justify-center rounded-full bg-neutral-20 transition hover:scale-105"
             @click="handleSelectWidget('TEXT')"
           >
             <lukso-icon
@@ -133,7 +133,7 @@ const handleSelectWidget = (widgetType: GridWidgetType) => {
           <img
             src="/images/social-media-youtube.svg"
             alt="Youtube"
-            class="size-10 cursor-pointer transition hover:scale-[1.05]"
+            class="size-10 cursor-pointer transition hover:scale-105"
             @click="handleSelectWidget('YOUTUBE')"
           />
         </lukso-tooltip>
@@ -157,7 +157,7 @@ const handleSelectWidget = (widgetType: GridWidgetType) => {
           <img
             src="/images/social-media-spotify.svg"
             alt="Spotify"
-            class="size-10 cursor-pointer transition hover:scale-[1.05]"
+            class="size-10 cursor-pointer transition hover:scale-105"
             @click="handleSelectWidget('SPOTIFY')"
           />
         </lukso-tooltip>
@@ -171,7 +171,7 @@ const handleSelectWidget = (widgetType: GridWidgetType) => {
           <img
             src="/images/social-media-soundcloud.svg"
             alt="Sound Cloud"
-            class="cursor-pointer transition hover:scale-[1.05]"
+            class="cursor-pointer transition hover:scale-105"
             @click="handleSelectWidget('SOUNDCLOUD')"
           />
         </lukso-tooltip>
@@ -195,7 +195,7 @@ const handleSelectWidget = (widgetType: GridWidgetType) => {
           <img
             src="/images/social-media-x.svg"
             alt="X"
-            class="cursor-pointer transition hover:scale-[1.05]"
+            class="cursor-pointer transition hover:scale-105"
             @click="handleSelectWidget('X')"
           />
         </lukso-tooltip>
@@ -209,7 +209,7 @@ const handleSelectWidget = (widgetType: GridWidgetType) => {
           <img
             src="/images/social-media-warpcast.png"
             alt="Warpcast"
-            class="size-10 cursor-pointer rounded-full transition hover:scale-[1.05]"
+            class="size-10 cursor-pointer rounded-full transition hover:scale-105"
             @click="handleSelectWidget('WARPCAST')"
           />
         </lukso-tooltip>
@@ -223,7 +223,7 @@ const handleSelectWidget = (widgetType: GridWidgetType) => {
           <img
             src="/images/social-media-instagram.svg"
             alt="Warpcast"
-            class="size-10 cursor-pointer rounded-full transition hover:scale-[1.05]"
+            class="size-10 cursor-pointer rounded-full transition hover:scale-105"
             @click="handleSelectWidget('INSTAGRAM')"
           />
         </lukso-tooltip>
diff --git a/domains/grid/components/GridFloatingMenu.vue b/domains/grid/components/GridFloatingMenu.vue
index cc9fdbdd..458d122d 100644
--- a/domains/grid/components/GridFloatingMenu.vue
+++ b/domains/grid/components/GridFloatingMenu.vue
@@ -133,7 +133,7 @@ onUnmounted(() => {
 <template>
   <div
     v-if="isConnected && isViewingOwnProfile"
-    class="fixed z-50 flex animate-fade-in gap-6 overflow-hidden rounded-full bg-neutral-100 p-3 shadow-neutral-drop-shadow duration-300 ease-in-out sm:bottom-10 sm:right-10 sm:flex-col sm:transition lg:right-[calc(50%-540px)]"
+    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,
diff --git a/domains/grid/components/GridWidget.vue b/domains/grid/components/GridWidget.vue
index 33084aaa..12902907 100644
--- a/domains/grid/components/GridWidget.vue
+++ b/domains/grid/components/GridWidget.vue
@@ -198,7 +198,7 @@ onMounted(() => {
     ref="target"
     class="group relative flex h-full flex-col rounded-12 transition"
     :class="{
-      'bg-neutral-100 shadow-neutral-drop-shadow hover:shadow-neutral-drop-shadow-1xl':
+      'bg-neutral-100 shadow-neutral-shadow-round hover:shadow-neutral-shadow-round-1xl':
         !isAddContentWidget,
       'select-none': isAllowToEdit,
       'z-50': isOpen,
@@ -219,7 +219,7 @@ onMounted(() => {
       }"
     >
       <div
-        class="mb-1 flex size-[35px] items-center justify-center rounded-full border border-neutral-90 bg-neutral-100 shadow-neutral-drop-shadow-1xl transition hover:scale-[1.05]"
+        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"
@@ -300,7 +300,7 @@ onMounted(() => {
     <!-- 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-drop-shadow-1xl transition hover:scale-[1.05] group-hover:opacity-100"
+      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"
diff --git a/domains/grid/components/GridWidgetAddContent.vue b/domains/grid/components/GridWidgetAddContent.vue
index 8e1342b9..9f079e4a 100644
--- a/domains/grid/components/GridWidgetAddContent.vue
+++ b/domains/grid/components/GridWidgetAddContent.vue
@@ -11,7 +11,7 @@ const handleAddContent = () => {
 
 <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-drop-shadow"
+    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"
   >
diff --git a/domains/grid/components/__tests__/__snapshots__/GridFloatingMenu.spec.ts.snap b/domains/grid/components/__tests__/__snapshots__/GridFloatingMenu.spec.ts.snap
index 002123d5..c9141174 100644
--- a/domains/grid/components/__tests__/__snapshots__/GridFloatingMenu.spec.ts.snap
+++ b/domains/grid/components/__tests__/__snapshots__/GridFloatingMenu.spec.ts.snap
@@ -2,7 +2,7 @@
 
 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-drop-shadow 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="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 widget" placement="left" offset="15" show-delay="1000">
@@ -27,7 +27,7 @@ exports[`GridFloatingMenu > should render when edit mode is enabled 1`] = `
 
 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-drop-shadow 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="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 widget" placement="left" offset="15" show-delay="1000">
@@ -52,7 +52,7 @@ exports[`GridFloatingMenu > should render when has unsaved changes 1`] = `
 
 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-drop-shadow 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;">
+  <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">
diff --git a/domains/rpc/components/NftListCardRpc.vue b/domains/rpc/components/NftListCardRpc.vue
index c154233d..96326740 100644
--- a/domains/rpc/components/NftListCardRpc.vue
+++ b/domains/rpc/components/NftListCardRpc.vue
@@ -145,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 -->
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/package.json b/package.json
index b26c1f64..1214069b 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "@formatjs/intl": "^2.9.9",
     "@google/model-viewer": "^3.4.0",
     "@lukso/lsp-smart-contracts": "0.15.0-rc.5",
-    "@lukso/web-components": "1.96.0",
+    "@lukso/web-components": "1.97.0",
     "@nuxt/test-utils": "^3.13.1",
     "@nuxtjs/algolia": "^1.10.2",
     "@nuxtjs/device": "^3.1.1",
@@ -86,7 +86,7 @@
     "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",
@@ -106,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",
diff --git a/yarn.lock b/yarn.lock
index c539b6cd..36414e2b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4723,9 +4723,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@lukso/web-components@npm:1.96.0":
-  version: 1.96.0
-  resolution: "@lukso/web-components@npm:1.96.0"
+"@lukso/web-components@npm:1.97.0":
+  version: 1.97.0
+  resolution: "@lukso/web-components@npm:1.97.0"
   dependencies:
     clsx: "npm:^2.0.0"
     ethereum-blockies-base64: "npm:^1.0.2"
@@ -4733,7 +4733,7 @@ __metadata:
     tailwind-variants: "npm:^0.2.1"
     tippy.js: "npm:^6.3.7"
     web3-utils: "npm:^4.3.1"
-  checksum: ac37a9199ed1f8c36ead1bb1c2dec50985c4184dce162149bc021ff8fa26ed4a0c9bf95855378255685e4bfc44dadd073c7b0ee4c98fa18a38522bbe5a4b4825
+  checksum: fc6e761a46539ccb93743010d97448713732c5f0a5ff4170291e8aaa6b06687f786da44a005255d2969e73aba81d371a9c569566394bb6377e0c060731ac13e8
   languageName: node
   linkType: hard
 
@@ -12780,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
 
@@ -20440,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: "*"
@@ -20456,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:
@@ -20467,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:
@@ -20481,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
 
@@ -24238,7 +24242,7 @@ __metadata:
     "@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.96.0"
+    "@lukso/web-components": "npm:1.97.0"
     "@nuxt/test-utils": "npm:^3.13.1"
     "@nuxtjs/algolia": "npm:^1.10.2"
     "@nuxtjs/device": "npm:^3.1.1"
@@ -24292,7 +24296,7 @@ __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"
@@ -24315,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"