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 d42f4091..0076e320 100644
--- a/components/AssetAssets3D.vue
+++ b/components/AssetAssets3D.vue
@@ -19,7 +19,7 @@ const handleClick = () => {
 
 <template>
   <div
-    class="paragraph-inter-10-bold-uppercase hover:shadow-neutral-shadow-round 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"
+    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 7de5e851..3adde634 100644
--- a/components/AssetAssetsAudio.vue
+++ b/components/AssetAssetsAudio.vue
@@ -19,7 +19,7 @@ const handleClick = () => {
 
 <template>
   <div
-    class="paragraph-inter-10-bold-uppercase hover:shadow-neutral-shadow-round 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"
+    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 bd10fd36..023ad66f 100644
--- a/components/AssetAssetsContract.vue
+++ b/components/AssetAssetsContract.vue
@@ -12,7 +12,7 @@ const handleClick = () => {
 
 <template>
   <div
-    class="paragraph-inter-10-bold-uppercase hover:shadow-neutral-shadow-round 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"
+    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 c5c81207..40980eb2 100644
--- a/components/AssetAssetsDocument.vue
+++ b/components/AssetAssetsDocument.vue
@@ -19,7 +19,7 @@ const handleClick = () => {
 
 <template>
   <div
-    class="paragraph-inter-10-bold-uppercase hover:shadow-neutral-shadow-round 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"
+    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 c510c1e8..22bacaaa 100644
--- a/components/AssetAssetsImage.vue
+++ b/components/AssetAssetsImage.vue
@@ -24,7 +24,7 @@ const handleClick = () => {
 
 <template>
   <div
-    class="paragraph-inter-10-bold-uppercase hover:shadow-neutral-shadow-round 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"
+    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 227225bd..3e9c8914 100644
--- a/components/AssetAssetsOther.vue
+++ b/components/AssetAssetsOther.vue
@@ -19,7 +19,7 @@ const handleClick = () => {
 
 <template>
   <div
-    class="paragraph-inter-10-bold-uppercase hover:shadow-neutral-shadow-round 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"
+    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 9c8ce117..4b78ea98 100644
--- a/components/AssetAssetsVideo.vue
+++ b/components/AssetAssetsVideo.vue
@@ -19,7 +19,7 @@ const handleClick = () => {
 
 <template>
   <div
-    class="paragraph-inter-10-bold-uppercase hover:shadow-neutral-shadow-round 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"
+    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 e2f4eac8..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="hover:shadow-neutral-shadow-round rounded-8 bg-neutral-90 transition hover:scale-[1.02]"
+          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 3d45d49f..7b9a2d93 100644
--- a/components/ModalTemplateTokenCollection.vue
+++ b/components/ModalTemplateTokenCollection.vue
@@ -85,7 +85,7 @@ const handleViewEntireCollection = () => {
         :asset="token"
       />
       <div
-        class="paragraph-inter-16-semi-bold hover:shadow-neutral-shadow-round-1xl 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"
+        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/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 8aec69b1..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="shadow-neutral-shadow-round fixed z-50 flex animate-fade-in gap-6 overflow-hidden rounded-full bg-neutral-100 p-3 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 25feb6db..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="{
-      'shadow-neutral-shadow-round hover:shadow-neutral-shadow-round-1xl bg-neutral-100':
+      '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="shadow-neutral-shadow-round-1xl mb-1 flex size-[35px] items-center justify-center rounded-full border border-neutral-90 bg-neutral-100 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 shadow-neutral-shadow-round-1xl 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 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 e9aed896..9f079e4a 100644
--- a/domains/grid/components/GridWidgetAddContent.vue
+++ b/domains/grid/components/GridWidgetAddContent.vue
@@ -11,7 +11,7 @@ const handleAddContent = () => {
 
 <template>
   <div
-    class="hover:shadow-neutral-shadow-round flex h-full cursor-pointer flex-col items-center justify-center overflow-hidden rounded-12 p-4 opacity-50 transition hover:opacity-100"
+    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/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/package.json b/package.json
index c8846d1a..1214069b 100644
--- a/package.json
+++ b/package.json
@@ -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 fc1ba18f..36414e2b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -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
 
@@ -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"